我使用 jQuery 中的
我如何比较从 jQuery 获取的颜色值与例如黑色的颜色值?
.css('color')
方法来获取颜色值,然后我知道应该是哪种颜色。我如何比较从 jQuery 获取的颜色值与例如黑色的颜色值?
.css('color')
方法来获取颜色值,然后我知道应该是哪种颜色。以下是一种使用 jQuery 可以在所有浏览器上运行的方法:
<div id="dummy" style="display:none;"></div>
。 (使用 JQuery 动态创建虚拟元素不能适用于命名颜色)$('#dummy').css('color','black');
例如:
if($('#element').css('color') === $('#dummy').css('color')) {
//do something
}
.css()
返回原始样式值字符串;如果已附加,则会转换为rgb()
格式。 - ccprog关于这个问题...
if ($('#element').css('color') == 'rgb(0, 0, 0)')
{
// do something
}
将0、0、0替换为颜色值中你想要比较的红、绿、蓝值。
var color_one = "#FFA500";
var color_two = "#FFFF00";
function toggle_color(elem){
var bgcolor = elem.css("background-color");
elem.css("background-color", color_one); // try new color
if(bgcolor == elem.css("background-color")) // check if color changed
elem.css("background-color", color_two); // if here means our color was color_one
}
function compareColors(left, right) {
// Create a dummy element to assign colors to.
var dummy = $('<div/>');
// Set the color to the left color value, and read it back.
$(dummy).css('color', left);
var adjustedLeft = $(dummy).css('color');
// Set the color to the right color value, and read it back.
$(dummy).css('color', right);
var adjustedRight = $(dummy).css('color');
// Both colors are now adjusted to use the browser's internal format,
// so we can compare them directly.
return adjustedLeft == adjustedRight;
}
您不需要将元素实际添加到DOM中即可使其工作。在IE8、IE10、FF、Chrome和Safari中进行了测试。
rgb
,rgba
,#hex
,几乎不支持的#hexalpha
,臭名昭著的命名颜色和特殊的transparent
。
要比较任何颜色与任何颜色,您需要首先将它们标准化。
在这里(gist)或这里(SO答案)找到的colorValues
函数将始终为您提供数字值的[r,g,b,a]
数组。var sameColor = colorValues(color1).join(',') === colorValues(color2).join(',');
// return array of [r,g,b,a] from any valid color. if failed returns undefined
function colorValues(color)
{
if (color === '')
return;
if (color.toLowerCase() === 'transparent')
return [0, 0, 0, 0];
if (color[0] === '#')
{
if (color.length < 7)
{
// convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
}
return [parseInt(color.substr(1, 2), 16),
parseInt(color.substr(3, 2), 16),
parseInt(color.substr(5, 2), 16),
color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
}
if (color.indexOf('rgb') === -1)
{
// convert named colors
var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
temp_elem.style.color = flag;
if (temp_elem.style.color !== flag)
return; // color set failed - some monstrous css rule is probably taking over the color of our object
temp_elem.style.color = color;
if (temp_elem.style.color === flag || temp_elem.style.color === '')
return; // color parse failed
color = getComputedStyle(temp_elem).color;
document.body.removeChild(temp_elem);
}
if (color.indexOf('rgb') === 0)
{
if (color.indexOf('rgba') === -1)
color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
return color.match(/[\.\d]+/g).map(function (a)
{
return +a
});
}
}
实际上,我尝试了Charlie Kilian的答案。由于某种原因,当您尝试使用'rgb(0,0,0)'值设置.css('color')
时,它不起作用。
我不知道为什么。在控制台中完美运行。也许是因为我的比较函数在javascript对象中,存在某种上下文问题或引用问题。无论如何,最终我感到沮丧,并编写了自己的函数,以比较两种颜色,而不考虑格式,并且不创建任何元素或依赖于jQuery。该函数接受HEX和RGB值。
它可能可以优化,但我现在真的没有时间。希望这对某人有所帮助,它是纯javascript。
var compareColors= function (left, right) {
var l= parseColor(left);
var r=parseColor(right);
if(l !=null && r!=null){
return l.r == r.r && l.g == r.g && l.b == r.b;
}else{
return false;
}
function parseColor(color){
if(color.length==6 || color.length==7){
//hex color
return {
r:hexToR(color),
g:hexToG(color),
b:hexToB(color)
}
}else if(color.toLowerCase().indexOf('rgb')>-1){
var arr
var re = /\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*/gmi;
var m;
if ((m = re.exec(color)) !== null) {
if (m.index === re.lastIndex) {
re.lastIndex++;
}
// View your result using the m-variable.
// eg m[0] etc.
arr = m[0].split(',');
return {
r: parseInt(arr[0].trim()),
g: parseInt(arr[1].trim()),
b: parseInt(arr[2].trim())
}
}else{
return null;
}
} else{
return null;
}
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
}
}
以下这些函数我从www.javascripter.net中获取。
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
修改自Katie Kilian的代码,但不需要使用jQuery
<div id="dummy"></div>
function compareColors(left, right) {
// Create a dummy element to assign colors to.
document.getElementById('dummy').style.background = left;
var adjustedLeft = document.getElementById('dummy').style.background;
// Set the color to the right color value, and read it back.
document.getElementById('dummy').style.background = right;
var adjustedRight = document.getElementById('dummy').style.background;
// Both colors are now adjusted to use the browser's internal format,
// so we can compare them directly.
return adjustedLeft == adjustedRight;
}