使用 Jquery 读取样式属性答案

【问题标题】：Reading style property with Jquery使用 Jquery 读取样式属性
【发布时间】：2013-07-10 11:50:22
【问题描述】：

我的页面上有类似的内容。

<div class="number_1" style="background-color:red"></div>
<div class="number_2" style="background-color:yellow"></div>
<div class="number_3"></div>
<div class="number_4"></div>
<div class="number_5" style="background-color:red"></div>

我无法通过添加背景颜色类来更改 HTML 代码！它必须是红色的！

我需要这样的功能

for(var i=1; i<=5; i++){
    if($('.number_'+i).hasBackgroundColor('red')){
        //something
    }else{
        //somethign else
    }
}

.attr('style')==='background-color: red' 似乎不起作用

.css('background-color') 似乎也不起作用

【问题讨论】：

你是如何使用 .css() 的？
JQuery 有 .css() 。在这里查看他们的文档：api.jquery.com/css。他们也有一个很好的演示。
实际上，attr('style') 工作正常，只是 IE 返回的字符串与其他浏览器不同。

标签： jquery background styles

【解决方案1】：

这里是背景颜色：

var backgroundColor = $('.number_'+i).css('background-color');

它将返回类似“rgb(245, 180, 5)”的内容。红色为“rgb(255,0,0)”。

如果您更喜欢获取 hexa 值，例如 #ff0000 表示红色，请使用这样的函数：

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

【讨论】：

我认为有些浏览器可能会返回rgba而不是rgb，我认为有些浏览器有时甚至会返回十六进制代码。只是 FWIW。

【解决方案2】：

css('background-color') 在您的情况下以 rgb 返回颜色 "rgb(255,0,0)"。

【讨论】：

【解决方案3】：

试试这个，

for(var i=1; i<=5; i++){
    if($('.number_'+i).css('background-color')=='red'){ // or ==rgb(255,0,0)
        //something
    }else{
        //somethign else
    }
}

【讨论】：

我认为 css('background-color') 总是会返回 'rbg(...,...,...)'
@Ricola3D：是的，rgb 或者我认为在某些浏览器上你可能会得到一个十六进制颜色代码。当然不是"red"。
@T.J. Crowder 只是出于好奇（以及未来的工作），哪些版本的浏览器会返回一个 hexa 代码？

【解决方案4】：

.attr('style')==='background-color: red' dont seem to work

一个空格会给出不同的结果：

$('<div style="background-color:red"></div>').attr('style') === 'background-color: red'

假

$('<div style="background-color:red"></div>').attr('style') === 'background-color:red'

是的

【讨论】：

【解决方案5】：

$(document).ready(function() {
$.each($('div') , function(index) {
alert($(this).attr('style'));
});
});

然后，在循环中添加您的附加逻辑/条件...

这样的……

$(document).ready(function() {
$.each($('div') , function(index) {

style=$(this).attr('style');

if(style=='background-color: red;' || style=='background-color:red') {

    alert($(this).attr('class')+' is red!');

}

});
});

【讨论】：

【解决方案6】：

您可以尝试使用.css() 方法，它以 rgb 形式返回。

for (var i = 1; i <= 5; i++) {    
    if ($('.number_' + i).css("background-color") == "rgb(255, 0, 0)") { 
    //something    
    } else {
        //somethign else
    }
}

作为 T.J. Crowder 提到，上述代码仅适用于 chrome，不适用于 firefox 或 IE。

也可以尝试使用RGB color parser in JavaScript

【讨论】：

@用户：这是一个改进。但请注意，不同的浏览器以不同的方式返回值（例如，有或没有空格，有时它们返回rgba 而不是rgb，我认为有些甚至有时返回十六进制代码）。