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

Question

Я получаю значение цвета с помощью jQuery с .css('color'), и тогда я знаю, что цвет должен быть.

Как я могу сравнить значение цвета, полученное из jQuery, например, со значением черного цвета?

Answer 1

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

1. Создайте скрытый div <div id="dummy" style="display:none;"></div> на своей HTML-странице. (Создание фиктивного элемента динамически с помощью 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 () API jQuery

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

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

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

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 6

На самом деле я попытался ответ Чарли Килиана . По какой-то причине это не сработало, когда вы пытаетесь установить .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}