¿Cómo puedo comparar dos valores de color en jQuery/JavaScript?

Question

Obtengo valor de color con jQuery con .css('color'), y luego sé el color que debería ser.

¿Cómo puedo comparar el valor de color que obtengo de jQuery con, por ejemplo, el valor de color negro?

Answer 1

... ¿Qué hay de

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

Reemplazar 0, 0, 0 con los valores de rojo, verde y azul del valor de color que desea comparar.

.css() jQuery API

Answer 2

Aquí es un enfoque que debería funcionar en todos los navegadores usando jQuery:

1. Crear un div oculto <div id="dummy" style="display:none;"></div> en su página HTML. (Creación del elemento postizo dinámicamente con JQuery no funciona para los colores con nombre)
2. establecer el color del elemento postizo con el color esperado, es decir $('#dummy').css('color','black');
3. comparar el color del elemento postizo con el elemento que desea comprobar

es decir

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

Answer 3

I tenían un problema similar donde tenía que cambiar el color BGND de un elemento. Lo resolví así:

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

Aquí está mi implementación de la respuesta de Mike, en una función.

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

No necesita agregar realmente los elementos al DOM para que esto funcione. Probado en IE8, IE10, FF, Chrome, Safari.

Answer 5

En realidad lo intenté Charlie Kilian's answer. Por alguna razón, no funcionó cuando intentas configurar .css('color') con un valor 'rgb (0,0,0)'.

No sé por qué. Funcionó perfectamente en la consola. Tal vez fue porque mi función de comparación está en un objeto javascript y es algún tipo de problema de contexto o de referencia. De cualquier manera, finalmente me frustré y escribí mi propia función que comparará dos colores, independientemente de los formatos, y no creará ningún elemento ni dependerá de jQuery. La función toma valores HEX y RGB.

Probablemente se puede optimizar, pero realmente no tengo el tiempo ahora. Espero que esto ayude a alguien es javascript puro.

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

Estas funciones siguientes me tomaron de 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 Los colores pueden aparecer en muchos formatos - rgb, rgba, #hex, difícilmente compatibles #hexalpha, los colores con nombre infames, y el especial transparent. Para comparar cualquier color con cualquier color, primero debe normalizarlos. La función colorValues encontró here (gist) o here (SO answer siempre le dará [r,g,b,a] matriz de valores numéricos.
Luego se pueden comparar de esta manera: la función

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