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（245,180,5）”的内容。红色是“rgb（255,0,0）”。

如果您希望获得六角值，例如＃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（255,0,0）”中以rgb返回颜色。

Answer 3

您可以尝试使用在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.克劳德提到，上面的代码只适用于chrome，而不适用于firefox或IE。

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

Answer 4

试试这个，

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

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

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

真

使用Jquery读取样式属性

6 个答案: