javascript - jquery if (css_attribute = value)

Question

是否可以在 javascript/jquery 中执行 if 语句来确定：

如果某个元素的css属性的值等于给定的值？

如：

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

Answer 1

JQuery 方法，当css只给定一个参数时，将返回给定参数的值。你可以试试这个：

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 方法遍历整个选择器。

请注意，.cssJQuery 方法在大多数浏览器（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!
}

这可以在所有浏览器中无缝运行，无需 hack，而且您可以更好地分离关注点——也就是说，如果您的样式发生变化，例如.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)')

“昏迷后的空间”

Answer 4

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

Answer 5

以上似乎都没有在 2015 年在这里工作。对我来说，在 Chrome 的所有情况下，针对 :visited 颜色测试链接的颜色似乎都是正确的。此外，如果您不是“嗅探”并且真的想知道在他们访问您的网站期间是否点击了链接，我发现一个简单的：

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

并且检查班级工作得很好。

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