如何比較 jQuery/JavaScript 中的兩個顏色值？

Question

我通過.css('color')使用 jQuery 獲得顏色值，然后我知道它應該是什么顏色。

如何比較從 jQuery 獲得的顏色值與例如黑色值？

Answer 1

這是一種適用於所有使用JQuery的瀏覽器的方法：

1. 在HTML頁面上創建一個隱藏的div <div id="dummy" style="display:none;"></div> 。 （使用JQuery動態創建虛擬元素不適用於命名顏色）
2. 將虛擬元素的顏色設置為預期顏色，即$('#dummy').css('color','black');
3. 將虛擬元素的顏色與要檢查的元素進行比較

即

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

Answer 2

關於什么...

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

將0,0,0替換為要比較的顏色值的紅色，綠色和藍色值。

.css（）jQuery API

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 = $('<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中測試過。

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 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}

Answer 6

CSS顏色可以以多種格式出現 - rgb ， rgba ， #hex ，幾乎不支持#hexalpha ，臭名昭着的命名顏色和特殊transparent 。 要將任何顏色與任何顏色進行比較，首先需要將它們標准化。 這里找到的colorValues函數（gist）或這里（SO答案將始終為您提供[r,g,b,a]數值數組。
然后你可以像這樣比較它們：

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

colorValues函數

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

Answer 7

由 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;
}