我可以强制 jQuery.css("backgroundColor") 以十六进制格式返回吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6177454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I force jQuery.css("backgroundColor") returns on hexadecimal format?
提问by Erick Petrucelli
I have an element like this:
我有一个这样的元素：
<p>My text with a <strong class="highlighted">sample highlight</strong>.<p>
And the CSS class like this:
和这样的 CSS 类：
.highlighted {
background: #f0ff05;
font-weight: normal;
}
But when I use a jQuery like this:
但是当我使用这样的 jQuery 时：
$(".highlighted").css("backgroundColor");
It returns rgb(240, 255, 5). I could write some function to convert from rgbto hex, but I would like to know if there is some way to jQuery return the value already on hexadecimal format.
它返回rgb(240, 255, 5)。我可以编写一些函数来从rgb转换为hex，但我想知道是否有某种方法可以让 jQuery 以十六进制格式返回已经存在的值。
回答by Erick Petrucelli
Colors are always returned as rgb(except IE6 which already returns in hex), then we cannot return in another format natively.
颜色总是作为rgb返回（除了 IE6 已经以hex返回），然后我们不能以其他格式返回。
Like you said, you can write a function to convert hex to rgb. Here is a topic with several examples of how to write this function: How to get hex color value rather than RGB value?.
就像您说的，您可以编写一个函数将 hex 转换为 rgb。这是一个包含如何编写此函数的几个示例的主题：如何获取十六进制颜色值而不是 RGB 值？.
But you wonder if there is a way to directly return the jQuery already in hex: the answer is yes, this is possible using CSS Hookssince jQuery 1.4.3.
但是你想知道是否有一种方法可以直接返回 jQuery 已经是十六进制的：答案是肯定的，从 jQuery 1.4.3 开始，这可以使用CSS Hooks。
The code should be:
代码应该是：
$.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]);
}
}
}
And when you call $(".highlighted").css("backgroundColor"), the return will be #f0ff05. Here is a working sampleto you see it working.
当你打电话时$(".highlighted").css("backgroundColor")，回报将是#f0ff05。这是一个工作示例，您可以看到它的工作原理。
回答by li3
This is a slightly adjusted version of Erick Petrucelli's answer. It appears to handle RGBA.
这是 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]);
}
}
}
};
