jQuery si (css_attribute = valor)

Question

¿Es posible hacer una sentencia if en Javascript/jQuery para determinar:

Si el valor del atributo css de un determinado elemento es igual a un valor dado?

tales como:

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

Answer 1

El método jQuery css, cuando se administra sólo un parámetro, se devolverá el valor de lo dado paramenter. Puede probar esto:

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

El ejemplo anterior sólo funcionará para el primer elemento en el selector de jQuery, por lo tanto, se debe utilizar el método jQuery .each para recorrer todo el selector de si tiene más de un elemento en ella .

Tenga en cuenta que .css El método JQuery devuelve una combinación RGB en la mayoría de los navegadores (excepto IE), por lo que probarla con una cadena como blue no será suficiente para navegadores no IE. Puede probar eso en el JQuery API site y my fiddle.

Y aquí es con el buen .each iteración:

$('.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

---

Editar: más de un año y medio después, siento que esta respuesta merece una actualización .

Para la mayoría de los casos de uso, le recomiendo usar una clase CSS:

.blue { 
    color: blue; 
} 

Esto permite el uso de los addClass(), removeClass(), toggleClass() métodos para la manipulación, así como para la comprobación hasClass():

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

Esto funciona a la perfección en todos los navegadores sin necesidad de hacks, y como un plus se obtiene una mejor separación de las preocupaciones, es decir, si el diseño cambia alguna vez, digamos .blue { color: lightblue; }, el JS seguirá trabajando sin modificaciones.

Nota: por supuesto, este enfoque no es adecuado para un par de casos de uso raro donde el valor de color se genera dinámicamente (por ejemplo, usando Math.random() o seleccionando un valor de color de un lienzo), en estos raros casos de uso todavía puede usa la primera solución en esta respuesta.

Answer 2

Usted debe ser capaz de hacer algo como esto:

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

cheque por espacios en

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

"espacio después COMA"

Answer 5

Ninguna de las anteriores parece funcionar aquí en 2015. Las pruebas de color de un enlace en contra del: Color visitado parece ser verdadero en todos los casos en Chrome para mí. Además, si usted no está 'oliendo' y realmente quiere saber si un enlace se ha hecho clic durante su visita a su página web he encontrado que un simple:

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

y la comprobación de la clase funciona bien.

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