Question

我正在使用CSS选择器来匹配某些元素，我想用javascript检测这些元素。我发现我可以在这些元素的css中设置颜色，然后通过颜色检索它们。问题是style.backgroundColor仅返回if inline样式。

CSS

div{background-color: lightgrey;}

JS

alert(document.getElementById("myDiv").style.backgroundColor);

有没有办法让颜色检测工作，或者有人可以更好地了解如何检测受影响的元素（通过css选择器）？

我不想为此使用jquery。

Answer 1

element.style只返回内联样式声明（或使用elements.style['foo'] = "bar"在JS中添加的声明。它并不总是浏览器应用的规则，例如CSS声明使用!important可以覆盖内联样式。您还可以有多个CSS声明相互覆盖，浏览器决定使用CSS选择器优先规则应用哪个。

要获得实际应用的规则，您应该使用getComputedStyle方法：http://jsfiddle.net/qUDjb/31/

window.getComputedStyle(document.getElementById("myDiv"))['background-color']

getComputedStyle

上的

MDN

编辑：如果你想通过背景颜色获取元素，那么它不是最好的方法，但是可以获得元素集合，然后按计算出的样式值进行过滤：{{ 3}}

<强> CSS

p:nth-child(2n) {
     background-color:lightgrey;
}

<强> JS

var getElementsByBackgroundColor = function( collection, color ){
    // convert the color string to the format used by browser
    var div = document.createElement('div');
        div.style.backgroundColor = color;
    var computedColor = div.style.backgroundColor;

    // compare computed background color and return matching elements
    return [].slice.call( collection ).filter( function( item ){
       return window.getComputedStyle( item )['background-color'] == computedColor;
    });
}
console.log( getElementsByBackgroundColor( document.querySelectorAll('p'), 'lightgrey') );

使用CSS标记元素，以便稍后使用JS检测它们

1 个答案: