jquery if（css_attribute = value）

Question

是否可以在javascript / jquery中執行if語句來確定：

如果某個元素的css屬性的值等於給定值？

如：

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

Answer 1

只給出一個參數時， css JQuery方法將返回給定參數的值。 你可以試試這個：

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

上面的示例僅適用於JQuery選擇器中的第一個元素，因此如果您有多個元素，則應使用.each JQuery方法迭代整個選擇器。

請注意， .css JQuery方法在大多數瀏覽器（IE除外）中返回RGB組合，因此對blue字符串進行測試對於非IE瀏覽器來說是不夠的。 您可以在JQuery API站點和我的小提琴中測試它。

這是適當的.each迭代：

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

---

編輯：一年半以后，我覺得這個答案值得更新。

對於大多數用例，我建議使用CSS類：

.blue {
    color: blue;
}

這允許使用addClass() ， removeClass() ， toggleClass()方法進行操作，以及使用hasClass()進行檢查：

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

這可以在所有瀏覽器中無縫地工作而不需要黑客攻擊，並且作為一個.blue { color: lightblue; } ，您可以更好地分離關注點 - 也就是說，如果您的樣式發生變化，請說明.blue { color: lightblue; } .blue { color: lightblue; }中，JS將繼續工作而無需修改。

注意：當然，這種方法不適用於動態生成顏色值的幾種罕見用例（例如，使用Math.random()或從畫布像素中選擇顏色值），在這些罕見的用例中，您仍然可以在這個答案中使用第一個解決方案。

Answer 2

你應該可以做這樣的事情：

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

Answer 3

檢查空格

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

“COMA后的空間”

Answer 4

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

Answer 5

以上都沒有在2015年在這里工作。測試鏈接的顏色與：訪問過的顏色似乎在Chrome的所有情況下都適用於我。 此外，如果您沒有“嗅探”並且真的想知道在訪問您的網站期間是否點擊了鏈接，我發現這很簡單：

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

並檢查班級工作正常。

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