javascript - JavaScriptを使用して特定のCSSプロパティが存在するすべての要素を取得しますか?

Question

特定の CSS プロパティが存在する DOM 上のすべての要素を取得する方法はありますか? CSS 値が background-image であるすべての要素を取得したいとします。それらすべてを選択するにはどうすればよいでしょうか。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

使用できる最新のブラウザで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]);
    } 
}

Answer 3

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

タグ名が事前にわかっている場合は、「*」ではなく正確なタグ名を使用することをお勧めします。