正在使用Jquery读取样式属性

Question

我的页面上有这样的东西。

<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')似乎也不起的作用

Answer 1

在这里您可以获得背景颜色：

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

它将返回类似于"rgb（245180，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('');
}

Answer 2

css（'background-color'）在您的情况下返回rgb中的颜色"rgb（255,0,0）"。

Answer 3

试试这个，

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

Answer 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'

真实

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

Answer 6

您可以尝试使用在rgb中返回的.css（）方法。

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中工作。

也可以尝试在JavaScript 中使用RGB颜色解析器