使用javascript获取具有某个CSS属性的所有元素？

Question

有没有办法让DOM上的所有元素都存在某个CSS属性？假设我想要获得具有背景图片CSS值的所有元素 - 我如何选择所有元素？我最好避免使用Jquery。

Answer 1

要绝对肯定的是，你必须得到这样的风格：

var elms = document.all ? document.all : document.body.getElementsByTagName("*"); 
for (i = 0; i < elms.length; i++) { 
    if ((elms[i].currentStyle && elms[i].currentStyle.backgroundImage.length > 0) || 
    (window.getComputedStyle && 
    window.getComputedStyle(elms[i]).getPropertyValue("background-image"))) { 
     alert('found one!'); 
    } 
}​ 

CurrentStyle用于IE，getComputedStyle用于其余部分。

Answer 2

var elms = document.all ? document.all : document.getElementsByTagName("*"); 
for (i = 0; i < elms.length; i++) { 
    if (elms[i].style.backgroundImage.length > 0) { 
     alert('found one!'); 
    } 
} 

这将是更好地使用准确的标签名而不是“*”，如果你知道这将是前手

Answer 3

在一个现代的浏览器可以使用getComputedStyles

var elements = document.getElementsByTagName("*"); 
var haveBg = new Array(); 
for (i = 0; i < elements.length; i++) { 
    var style = window.getComputedStyle(elements[i], null); 
    if (style.getPropertyValue("background-image") != 'none') { 
     haveBg.push(elements[i]); 
    } 
}