Question

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

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

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

From jQuery .css() documentation:

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，计算的维度样式几乎总是像素，但可以在样式表中将其指定为em，ex，px或%。不同的浏览器可能会返回逻辑上但文本上不相同的CSS颜色值，例如#FFF，#ffffff和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 = $('<div/>').css({ 
            backgroundColor: color
        }).css('backgroundColor');
        return thisBgColor === computedColor;
    }
})(jQuery);

用法：

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

Answer 2

正如@undefined已经说过，css()将返回背景颜色的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 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;
}

Answer 4

重要提示：确保输入 rgb(128, 128, 128)，并在逗号后留一个空格。如果您键入 rgb(128,128, 128)，它将不起作用。 它对空间敏感。

试试看：alert(element.css('background-color') === 'rgb(128, 128, 128)')

回答主要问题：

var style = 'background-color';
var gray = 'rgb(128, 128, 128)';

if(element.css(style) === gray){
  element.css(style,'blue');
}else{
  element.css(style,gray);
}

jquery如果背景颜色==

4 个答案: