6

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

我尝试了两种方法，这里是第一种：

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');
                }
            }
4

4 回答 4

17

来自 jQuery.css()文档：

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以指定为、 或em在ex样式表中。不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如、和。px%#FFF#ffffffrgb(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') ) {
   // ...
}
于 2012-08-25T18:17:26.400 回答
5

正如@undefined 已经说过的那样，css()将返回rgb背景颜色的值，这可以解决您的问题，因此您应该支持他的答案。但是，我强烈建议您不要在 JavaScript 中使用固定颜色。

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

.orange {
  background-color: #ffb100;
}

.white {
  background-color: white;
}

然后简单地切换字段的类，这比在 JavaScript 中比较 hex 或 rgb 值要干净得多，并且当你想要不同的颜色时更容易切换：

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

这是一个演示。

于 2012-08-25T18:30:28.507 回答
1

我不确定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;
}
于 2012-08-25T18:17:35.660 回答
0

重要提示：确保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);
}
于 2021-04-28T14:23:54.640 回答