jquery if (css_attribute = valore)

Question

E 'possibile fare un'istruzione if in JavaScript/jQuery per determinare:

Se il valore dell'attributo CSS di un certo elemento è uguale a un determinato valore?

come ad esempio:

if($('.box').css(background-color = blue)){ 
    // do this... 
} 

Answer 1

Il metodo JQuery css, quando somministrato un solo parametro, restituirà il valore per il dato paramenter. Si può provare questo:

var color = $('.box').css('background-color'); 
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack 
    alert("it's blue!\nColor detected: " + color); 

L'esempio sopra riportato funziona solo per il primo elemento nel selettore jQuery, quindi si dovrebbe utilizzare il metodo JQuery .each per scorrere l'intero selettore se si dispone di più di un elemento in esso .

Si noti che il metodo JQuery .css restituisce una combinazione RGB nella maggior parte dei browser (tranne IE), pertanto il test su una stringa come blue non è sufficiente per i browser non IE. Puoi verificarlo nello JQuery API site e nello my fiddle.

Ed ecco con il corretto .each di iterazione:

$('.box').each(function(i){ 
    var color = $(this).css('background-color'); 
    if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack 
     alert("div " + i + " is blue!\nColor detected: " + color); 
});​ 

JSFiddle

---

Edit: oltre un anno e mezzo più tardi, mi sento come se questa risposta merita un aggiornamento .

Per la maggior parte i casi d'uso, mi consiglia di utilizzare una classe CSS:

.blue { 
    color: blue; 
} 

Questo permette l'utilizzo dei addClass(), removeClass(), toggleClass() metodi per la manipolazione, così come per il controllo hasClass():

if ($('#myElem').hasClass('blue')) { 
    //it has the .blue class! 
} 

Questo funziona perfettamente in tutti i browser senza bisogno di hack, e come un vantaggio si ottiene una migliore separazione delle preoccupazioni - cioè, se lo stile cambia, per esempio .blue { color: lightblue; }, il JS continuerà a funzionare senza modifiche.

Nota: questo approccio non è adatto per un paio di casi di utilizzo rari in cui il valore del colore viene generato dinamicamente (ad esempio utilizzando Math.random() o prelevando un valore di colore da un pixel di tela), in questi rari casi d'uso è ancora possibile usa la prima soluzione in questa risposta.

Answer 2

Si dovrebbe essere in grado di fare qualcosa di simile:

if ($('.box').css('background-color') === 'blue') 
{// do this...} 

Answer 3

boxes = $('.box'); 
for(var i = 0;i<boxes.length;i++) { 
    if(boxes[i].style.backgroundColor =="blue") { 
    //do stuff 
    } 
} 

Answer 4

di controllo per gli spazi in

if($(this).css('color') == 'rgb(251, 176, 64)') 

"spazio dopo COMA"

Answer 5

Nessuno dei precedenti sembra funzionare qui nel 2015. Test di colore di un collegamento contro il: colore visitato sembra essere vero in tutti i casi in Chrome per me. Anche se non si 'annusato' e sinceramente vuole sapere se un link è stato cliccato durante la loro visita al tuo sito web ho trovato che un semplice:

$("a").addClass('visited'); 

e controllo per la classe funziona bene.

if ($("a").hasClass('visited');){ console.log('do something honorable'); }