我可以强制jQuery.css（“backgroundColor”）以hex格式返回？

我有这样一个元素：

<p>My text with a <strong class="highlighted">sample highlight</strong>.<p> 

和这样的CSS类：

 .highlighted { background: #f0ff05; font-weight: normal; } 

但是当我使用这样的jQuery：

 $(".highlighted").css("backgroundColor"); 

它返回rgb(240, 255, 5) 。 我可以写一些函数来从rgb转换为hex ，但我想知道是否有一些方法来jQuery返回已经在hex格式的值 。

Answer 1

颜色总是以rgb的forms返回（除了已经以hex返回的IE6外），那么我们不能以原生的格式返回。

就像你说的，你可以写一个函数把hex转换成rgb 。 这里有几个如何写这个函数的例子的主题： 如何得到hex颜色值而不是RGB值？ 。

但是你想知道是否有方法直接返回已经在hexjQuery的jQuery： 答案是肯定的 ，这是可能的使用CSS Hooks自jQuery 1.4.3。

代码应该是：

 $.cssHooks.backgroundColor = { get: function(elem) { if (elem.currentStyle) var bg = elem.currentStyle["backgroundColor"]; else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color"); if (bg.search("rgb") == -1) return bg; else { bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); } } } 

当你调用$(".highlighted").css("backgroundColor") ，返回值将是#f0ff05 。 这是一个工作示例 ，你看它的工作。

Answer 2

这是Erick Petrucelli的答案的一个稍微调整的版本。 它似乎处理RGBA。

  $.cssHooks.backgroundColor = { get: function (elem) { if (elem.currentStyle) var bg = elem.currentStyle["backgroundColor"]; else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color"); if (bg.search('rgba') > -1) { return '#00ffffff'; } else { if (bg.search('rgb') == -1) { return bg; } else { bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); } } } };