如何比较jQuery / JavaScript中的两个颜色值？

我使用带有.css('color') jQuery获得颜色值，然后我知道它应该是颜色。

如何比较从jQuery获得的颜色值，例如黑色值？

Answer 1

关于什么…

 if ($('#element').css('color') == 'rgb(0, 0, 0)') { // do something } 

将0,0,0替换为要比较的颜色值的红色，绿色和蓝色值。

.css（）jQuery API

Answer 2

这是一种适用于所有使用JQuery的浏览器的方法：

1. 在HTML页面上创建一个隐藏的div

   。 （使用JQuery动态创建虚拟元素不适用于命名颜色）

2. 将虚拟元素的颜色设置为预期颜色，即$('#dummy').css('color','black');
3. 将虚拟元素的颜色与要检查的元素进行比较

即

 if($('#element').css('color') === $('#dummy').css('color')) { //do something } 

Answer 3

我有一个类似的问题，我不得不切换元素的bgnd颜色。 我这样解决了：

 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 } 

Answer 4

以下是我在一个函数中实现Mike的答案。

 function compareColors(left, right) { // Create a dummy element to assign colors to. var dummy = $('
'); // 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中测试过。

Answer 5

其实我试过查理基利安的答案。 出于某种原因，当您尝试使用和’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 lr == rr && lg == rg && lb == rb; }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

  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} 

Answer 6

CSS颜色可以以多种格式出现 – rgb ， rgba ， #hex ，几乎不支持#hexalpha ，臭名昭着的命名颜色和特殊transparent 。 要将任何颜色与任何颜色进行比较，首先需要将它们标准化。 这里找到的colorValues函数（gist）或这里（SO答案将始终为您提供[r,g,b,a]数值数组。
然后你可以像这样比较它们：

 var sameColor = colorValues(color1).join(',') === colorValues(color2).join(','); 

colorValuesfunction

 // 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 }); } }