Comment puis-je comparer deux valeurs de couleur dans jQuery / JavaScript?

- Je obtenir une valeur de couleur avec jQuery avec .css('color')et puis, je sais la couleur qu'il devrait être.

Comment puis-je comparer la couleur de la valeur que je reçois de jQuery avec par exemple la couleur noire de la valeur?

source d'informationauteur newbie

14

Ce sujet...
```
if ($('#element').css('color') == 'rgb(0, 0, 0)')
{
    //do something
}
```
Remplacer 0, 0, 0 avec le rouge, le vert et le bleu les valeurs de la couleur de la valeur que vous souhaitez comparer.

.css() de jQuery API
21

Ici est une approche qui devrait fonctionner sur tous les navigateurs à l'aide de JQuery:
1. Créer un div caché <div id="dummy" style="display:none;"></div> sur votre page HTML. (La création de la maquette de l'élément de façon dynamique avec JQuery ne fonctionne pas pour les noms de couleurs)
2. Définir la couleur de la tétine, élément de la couleur, c'est à dire $('#dummy').css('color','black');
3. Comparer la couleur de la tétine élément avec l'élément que vous souhaitez vérifier
c'est à dire
```
if($('#element').css('color') === $('#dummy').css('color')) {
  //do something
}
```

J'ai eu un problème similaire où j'ai dû basculer le bgnd couleur d'un élément. Je l'ai résolu comme ceci:

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
}

Voici ma mise en œuvre de la réponse de Mike, en une seule fonction.

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

Vous n'avez pas besoin d'ajouter les éléments du DOM pour que cela fonctionne. Testé avec IE8, IE10, FF, Chrome, Safari.

En fait j'ai essayé Charlie Kilian est réponse. Pour une raison qu'il ne fonctionne pas lorsque vous tentez de définir .css('color') avec et " rgb(0,0,0) de valeur.

Je ne sais pas pourquoi. A parfaitement fonctionné dans la console. Peut-être que c'était parce que ma comparaison est un objet javascript et son un contexte de question ou d'un problème de référence. De toute façon, enfin je me suis senti frustré et a écrit de ma propre fonction qui permettra de comparer les deux couleurs indépendamment des formats et ne crée pas d'éléments ou de s'appuyer sur jQuery. La fonction prend deux HEX et des valeurs RVB.

Il peut probablement être optimisé, mais je n'ai pas vraiment le temps maintenant. Espérons que cela aide quelqu'un son pur 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}
}
}

Ces fonctions suivantes, j'ai pris de http://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}

CSS les Couleurs peuvent apparaître dans de nombreux formats - rgbrgba#hexà peine soutenu #hexalphainfâme couleurs nommées, et le transparent.
Pour comparer la couleur de n'importe quelle couleur vous avez besoin de normaliser le premier.
Le colorValues fonction ici (gist) ou ici (SI réponse toujours de vous donner [r,g,b,a] tableau de valeurs numériques.

Ensuite, vous pouvez comparer comme ça:

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

colorValues fonction

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

Vous devez vous connecter pour publier un commentaire.