Javascript jquery if (css_attribute = value)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10770826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery if (css_attribute = value)
提问by d-_-b
Is it possible to do an if statement in javascript/jquery to determine:
是否可以在 javascript/jquery 中执行 if 语句来确定：
If the value of a certain element's css attribute is equal to a given value?
如果某个元素的 css 属性的值等于给定的值？
such as:
如：
if( $('.box').css(background-color = blue) ){
// do this...
}
回答by Fabrício Matté
The cssJQuery method, when given only one parameter, will return the value for the given paramenter. You can try this:
该cssJQuery的方法，因为只有一个参数时，将返回值对于给定的paramenter。你可以试试这个：
var color = $('.box').css('background-color');
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
alert("it's blue!\nColor detected: " + color);
The above sample will only work for the first element in the JQuery selector, therefore you should use the .eachJQuery method to iterate through the whole selector if you have more than one element in it.
上面的示例仅适用于 JQuery 选择器中的第一个元素，因此.each如果您有多个元素，您应该使用JQuery 方法遍历整个选择器。
Please note that the .cssJQuery method returns a RGB combination in most browsers (except IE), so testing it against a string such as bluewill not suffice for non-IE browsers. You can test that in the JQuery API siteand my fiddle.
请注意，.cssJQuery 方法在大多数浏览器（IE 除外）中返回 RGB 组合，因此针对诸如此类的字符串对其进行测试blue对于非 IE 浏览器是不够的。您可以在JQuery API 站点和我的 fiddle 中进行测试。
And here's with the proper .eachiteration:
这是正确的.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);
});?
Edit:over a year and half later, I feel like this answer deserves an update.
编辑：一年半之后，我觉得这个答案值得更新。
For most use cases, I'd recommend using a CSS class:
对于大多数用例，我建议使用 CSS 类：
.blue {
color: blue;
}
This allows the usage of the addClass(), removeClass(), toggleClass()methods for manipulation, as well as hasClass()for checking:
这允许使用addClass(), removeClass(),toggleClass()方法进行操作以及hasClass()检查：
if ( $('#myElem').hasClass('blue') ) {
//it has the .blue class!
}
This works seamlessly in all browsers without needing hacks, and as a plus you get better separation of concerns -- that is, if your styling ever changes, say .blue { color: lightblue; }, the JS will keep working without modifications.
这可以在所有浏览器中无缝运行，无需 hack，而且您可以更好地分离关注点——也就是说，如果您的样式发生变化，例如.blue { color: lightblue; }，JS 将继续工作而无需修改。
Note: of course, this approach is not suitable for a couple rare use cases where the color value is dynamically generated (e.g. using Math.random()or picking a color value off a canvas pixel), in these rare use cases you can still use the first solution in this answer.
注意：当然，这种方法不适合动态生成颜色值的几个罕见用例（例如使用Math.random()或从画布像素中选择颜色值），在这些罕见用例中，您仍然可以使用第一个解决方案这个答案。
回答by Farhan Ahmad
You should be able to do something like this:
你应该能够做这样的事情：
if ($('.box').css('background-color') === 'blue')
{// do this...}
回答by user4488827
check for spaces in
检查空格
if($(this).css('color') == 'rgb(251, 176, 64)')
"SPACE AFTER COMA"
《昏迷后的空间》
回答by Ben Racicot
None of the above seems to work here in 2015. Testing a link's color against the :visited color seems to be true in all cases in Chrome for me. Also if you are not 'sniffing' and genuinely want to know if a link has been clicked during their visit to YOUR website I've found that a simple:
以上这些似乎在 2015 年都不起作用。对我来说，在 Chrome 的所有情况下，针对 :visited 颜色测试链接的颜色似乎都是正确的。另外，如果您不是“嗅探”并且真的想知道在他们访问您的网站期间是否点击了链接，我发现一个简单的：
$("a").addClass('visited');
and checking for the class works just fine.
并检查课程效果很好。
if ( $("a").hasClass('visited'); ){ console.log('do something honorable'); }
回答by matchdav
boxes = $('.box');
for(var i = 0;i<boxes.length;i++) {
if(boxes[i].style.backgroundColor =="blue") {
//do stuff
}
}
