jquery如果背景颜色==

我正在尝试检查元素的背景，这是我的代码。 但它不起作用：

我试过两种方法，这是第一种：

function changeColor(field) { if(field.css('background-color','#ffb100')) { field.css('background-color','white'); } else { field.css('background-color','ffb100'); } } 

这是第二个：

 function changeColor(field) { if(field.css('background-color') === '#ffb100') { field.css('background-color','white'); } else { field.css('background-color','ffb100'); } } 

但都没有奏效！ 有什么建议？

编辑：这是我的最新代码，但它仍然无法正常工作：

 function changeColor(field) { if(field.css('background-color') == 'rgb(255, 255, 255)') { field.css('background-color','ffb100'); } else { field.css('background-color','white'); } } 

Answer 1

来自jQuery .css()文档：

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。 例如，计算的维度样式几乎总是像素，但它们可以在样式表中指定为em ， ex ， px或% 。 不同的浏览器可以返回逻辑上但在文本上不相等的CSS颜色值，例如， #ffffff #FFF ， #ffffff #FFF和rgb(255,255,255) 。

大多数浏览器返回rgb值，因此您可以编写代码：

 if (field.css('background-color') === 'rgb(255, 177, 0)') { // ... } 

基于指定原因，上述代码段可能会在某些浏览器中失败。 您可以考虑使用颜色转换库或创建临时元素并设置并获取它的background-color / color属性。

一个简单的jQuery插件：

 (function($) { $.fn.isBgColor = function(color) { var thisBgColor = this.eq(0).css('backgroundColor'); var computedColor = $('
').css({ backgroundColor: color }).css('backgroundColor'); return thisBgColor === computedColor; } })(jQuery); 

用法：

 if ( field.isBgColor('#ffb100') ) { // ... } 

Answer 2

正如@undefined已经说过的那样， css()将为background-color返回一个rgb值，这可以解决你的问题，所以你应该回答他的答案。 但是，我强烈建议您不要在JavaScript中使用固定颜色。

另一种方法是定义两个CSS类，它们是放置样式的适当位置：

 .orange { background-color: #ffb100; } .white { background-color: white; } 

然后只需切换字段的类，这比在JavaScript中比较hex或rgb值更清晰，并且当您想要不同的颜色时更容易切换：

 function changeColor(field) { field.toggleClass("white orange"); } 

这是一个DEMO 。

Answer 3

我不确定field是指什么，但我的猜测是它是元素的id ？

如果是这样，请尝试包装field如$('#' + field).css 。

注意：这是将HEX转换为RGB的非常好的function

 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; }