jquery if (css_attribute = wartość)

Question

Czy można zrobić if w JavaScript/jQuery do określenia:

Jeżeli wartość atrybutu css pewien element jest równa podanej wartości?

takich jak:

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

Answer 1

css metoda JQuery, gdy podano tylko jeden parametr, zwróci wartość podana paramenter. Można spróbować to:

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

Powyższy przykład działa tylko dla pierwszego elementu w selektorze jQuery, dlatego należy użyć metody .each jQuery iterację cały wybierak, jeśli masz więcej niż jeden element w nim .

Należy pamiętać, że metoda JQuery w wersji .css zwraca kombinację RGB w większości przeglądarek (z wyjątkiem IE), więc jej przetestowanie na podstawie ciągu znaków, takiego jak blue, nie wystarczy w przeglądarkach innych niż IE. Możesz to sprawdzić w JQuery API site i my fiddle.

A oto z właściwym .each iteracji:

$('.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: ponad półtora roku później, czuję się jak ta odpowiedź zasługuje aktualizacji .

W większości przypadków użycia, polecam za pomocą klasy CSS:

.blue { 
    color: blue; 
} 

Pozwala to na korzystanie z addClass(), removeClass(), toggleClass() metod manipulacji, jak również hasClass() dla sprawdzenia:

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

To działa bezproblemowo we wszystkich przeglądarkach bez konieczności używania hacków, a dodatkowo masz lepszą separację problemów - to znaczy, jeśli Twoja stylizacja się zmieni, powiedzmy: .blue { color: lightblue; }, JS będzie działał bez modyfikacji.

Uwaga: to podejście nie jest odpowiednie dla kilku rzadkich przypadków użycia, w których wartość koloru jest generowana dynamicznie (np. Przy użyciu Math.random() lub wybierania wartości koloru poza pikselem), w tych rzadkich przypadkach można nadal używać użyj pierwszego rozwiązania w tej odpowiedzi.

Answer 2

Powinieneś być w stanie zrobić coś takiego:

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

czek na przestrzeni w

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

„spacji po coma”

Answer 5

Żadne z powyższych wydaje się działać tutaj w 2015. Testowanie kolor linku w tle: visited koloru wydaje się być prawdziwe we wszystkich przypadkach w Chrome dla mnie. Także jeśli nie jesteś „wąchania” i naprawdę chcą wiedzieć, czy link został wciśnięty podczas ich wizyty na swojej stronie znalazłem, że prosty:

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

i sprawdziany klasa działa dobrze.