jquery css 颜色值返回 RGB？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3048838/
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
jquery css color value returns RGB?
提问by FFish
In my CSS file:
在我的 CSS 文件中：
a, a:link, a:visited { color:#4188FB; }
a:active, a:focus, a:hover { color:#FFCC00; }
I tried with:
我试过：
var link_col = $("a:link").css("color");
alert(link_col); // returns rgb(65, 136, 251)
How can I get the HEX code?
我怎样才能得到十六进制代码？
*** edit: found the answer here:
Background-color hex to JavaScript variable
*** 编辑：在这里找到答案：
Background-color hex to JavaScript variable
Shame on me, could have search a bit better before posting..
对我感到羞耻，在发布之前可以搜索得更好一些..
回答by Pedro Muniz
Some adjustes to function
一些调整功能
$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
if (!rgb) {
return '#FFFFFF'; //default color
}
var hex_rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
if (hex_rgb) {
return "#" + hex(hex_rgb[1]) + hex(hex_rgb[2]) + hex(hex_rgb[3]);
} else {
return rgb; //ie8 returns background-color in hex format then it will make compatible, you can improve it checking if format is in hexadecimal
}
}
回答by The Virtual Machinist
Here you go, this will allow you to use $(selector).getHexBackgroundColor() to return the hex value easily :
在这里，这将允许您使用 $(selector).getHexBackgroundColor() 轻松返回十六进制值：
$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
回答by Mr. Polywhirl
Here is my take. Simple and concise.
这是我的看法。简单而简洁。
(function($) {
$.fn.getHexBackgroundColor = function() {
return (function(rgb) {
return '#' + (!rgb
? 'FFFFFF'
: rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
.slice(1)
.map(x => ('0' + parseInt(x).toString(16)).slice(-2))
.join('')
.toUpperCase());
})($(this).css('background-color'));
}
})(jQuery);
$(function() {
$('#color-rgb').text($('.foo').css('background-color'));
$('#color-hex').text($('.foo').getHexBackgroundColor());
});.foo {
background: #F74;
width: 100px;
height: 100px;
}
label { font-weight: bold; }
label:after { content: ': '; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo"></div>
<label>RGB</label><span id="color-rgb">UNDEF</span><br />
<label>HEX</label><span id="color-hex">UNDEF</span>