Как сравнить два значения цвета в jQuery/JavaScript?

Ответ 1

Как насчет...

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

Замените 0, 0, 0 красным, зеленым и синим значениями цветового значения, которое вы хотите сравнить.

. css() jQuery API

Ответ 2

Вот подход, который должен работать во всех браузерах с помощью JQuery:

• Создайте скрытый div <div id="dummy" style="display:none;"></div> на вашей HTML-странице. (Создание динамического элемента динамически с помощью JQuery не работает для именованных цветов)
• Установите цвет фиктивного элемента на ожидаемый цвет, т.е. $('#dummy').css('color','black');
• Сравните цвет фиктивного элемента с элементом, который вы хотите проверить.

то есть.

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

Ответ 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
}

Ответ 4

Вот моя реализация ответа Майка в одной функции.

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 internal format,
    // so we can compare them directly.
    return adjustedLeft == adjustedRight;
}

Вам не нужно добавлять элементы в DOM для этого. Протестировано в IE8, IE10, FF, Chrome, Safari.

Ответ 5

На самом деле я попробовал ответ Charlie Kilian's. По какой-то причине это не сработало, когда вы пытаетесь установить .css('color') с и значение "rgb (0,0,0)".

Я не знаю почему. Отлично работал в консоли. Возможно, это связано с тем, что моя функция сравнения находится в объекте 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}

Ответ 6

CSS Цвета могут появляться во многих форматах - rgb, rgba, #hex, вряд ли поддерживаются #hexalpha, печально известные именованные цвета и специальные transparent. Чтобы сравнить любой цвет с любым цветом, вам необходимо сначала его нормализовать. Функция colorValues нашла здесь (gist) или здесь (SO answer будет всегда давайте массив [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
        });
    }
}