jquery 如果背景颜色 ==
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12124451/
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 background color ==
提问by eatonphil
I am trying to check for the background of an element, here is my code. But it doesn't work:
我正在尝试检查元素的背景，这是我的代码。但它不起作用：
I tried two ways, here is the first:
我尝试了两种方法，这是第一种：
function changeColor(field) {
if(field.css('background-color','#ffb100')) {
field.css('background-color','white');
}
else {
field.css('background-color','ffb100');
}
}
here is the second:
这是第二个：
function changeColor(field) {
if(field.css('background-color') === '#ffb100') {
field.css('background-color','white');
}
else {
field.css('background-color','ffb100');
}
}
But neither worked! Any suggestions?
但都没有奏效！有什么建议？
EDIT: This is my latest code, but it still is not working:
编辑：这是我的最新代码，但它仍然无法正常工作：
function changeColor(field) {
if(field.css('background-color') == 'rgb(255, 255, 255)') {
field.css('background-color','ffb100');
}
else {
field.css('background-color','white');
}
}
回答by undefined
From jQuery .css()documentation:
Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as
em,ex,pxor%in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g.,#FFF,#ffffff, andrgb(255,255,255).
请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，计算样式尺寸的几乎都是像素，但是它们可以被指定为
em，ex，px或%在一个样式表。不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如#FFF，#ffffff、 和rgb(255,255,255)。
Most browsers return a rgbvalue, so you can code:
大多数浏览器都会返回一个rgb值，因此您可以编写代码：
if (field.css('background-color') === 'rgb(255, 177, 0)') {
// ...
}
The above snippet, based on the specified reason, may fail in some browsers. You can consider using a color conversion library or create a temporary element and set and get it's background-color/colorproperty.
根据指定的原因，上述代码段可能会在某些浏览器中失败。您可以考虑使用颜色转换库或创建一个临时元素并设置和获取它的background-color/color属性。
A simple jQuery plugin:
一个简单的 jQuery 插件：
(function($) {
$.fn.isBgColor = function(color) {
var thisBgColor = this.eq(0).css('backgroundColor');
var computedColor = $('<div/>').css({
backgroundColor: color
}).css('backgroundColor');
return thisBgColor === computedColor;
}
})(jQuery);
Usage:
用法：
if ( field.isBgColor('#ffb100') ) {
// ...
}
回答by Jo?o Silva
As @undefined already said, css()will return an rgbvalue for the background-color, which solves your problem, so you should upvote his answer. However, I stronglyadvise you against having fixed colors in your JavaScript.
正如@undefined 已经说过的那样，css()将返回rgb背景颜色的值，这解决了您的问题，因此您应该对他的回答投赞成票。但是，我强烈建议您不要在 JavaScript 中使用固定颜色。
An alternative is to define two CSS classes, which are the appropriate place to put styles:
另一种方法是定义两个 CSS 类，它们是放置样式的合适位置：
.orange {
background-color: #ffb100;
}
.white {
background-color: white;
}
And then simply toggle the field's class, which is much cleaner than to compare hex or rgb values in your JavaScript, and easier to switch when you want a different color:
然后简单地切换字段的类，这比在 JavaScript 中比较十六进制或 rgb 值要干净得多，并且在您想要不同的颜色时更容易切换：
function changeColor(field) {
field.toggleClass("white orange");
}
Here's a DEMO.
这是一个演示。
回答by Jordan Richards
I'm not sure what fieldis referring to, but my guess stands that it is the idof the element?
我不确定field指的是什么，但我的猜测是它是元素的id？
If so, try wrapping fieldlike so $('#' + field).css.
如果是这样，请尝试field像这样包装$('#' + field).css。
NOTE: Here's a VERY NICE function for converting HEX to RGB
注意：这是一个非常好的将 HEX 转换为 RGB 的函数
function hexToRgb(string)
{
if(!string || typeof string !== 'string') return false;
if(
string.substring(0,1) == '#' &&
(string.length == 4 || string.length == 7) &&
/^[0-9a-fA-F]+$/.test(string.substring(1, string.length))
){
string = string.substring(1, string.length);
if(string.length == 3)
string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
return 'rgb(' +
parseInt(string[0] + string[1], 16).toString() + ',' +
parseInt(string[2] + string[3], 16).toString() + ',' +
parseInt(string[4] + string[5], 16).toString() +
')';
}
else return false;
}
