Javascript使用CSS屬性查找元素

Question

我正在編寫一個Greasemonkey腳本，並且在腳本中的某個位置，我想更改當前具有一個元素的頁面上每個元素的背景顏色。 我知道我可以從其ID中獲取元素，並更改其CSS，如下所示：

document.getElementById("char").style.backgroundColor = "#FFFFFF";

但是是否可以用另一種方法做到這一點呢？這比遍歷頁面上的每個元素來檢查它是否具有背景色並進行更改要快得多？

// use a new background colour instead
document.getElementByCSS("background-color").style.backgroundColor = "#FFFFFF";

我想避免使用JQuery。

Answer 1

按照Musa上面所說的“使用內聯CSS，您可以執行document.querySelectorAll（'[style * =“ background-color”]'），但我看不到任何用於計算樣式的方法。” 我的案例涉及內聯CSS，所以一切都很好。

Answer 2

我不推薦使用，但您可以使用此功能

function findByCss( prop, val ) {
        var 
        retArr = [],
        allElms = document.getElementsByTagName('*'),
        computed,
        i = 0;
        for ( ; i < allElms.length; i++ ) {
            computed = window.getComputedStyle( allElms[i], null ).getPropertyValue(prop);
            if ( computed.indexOf( val ) >= 0 ) {
                retArr.push( allElms[ i ] );
            }
        }

        return retArr;

    }

它返回一個計算樣式的元素數組，該樣式包含要查找的style屬性的值，您可以根據需要將其更改為容忍度較低的條件。 另外請注意，所有十六進制顏色代碼均以RBG進行計算，因此在使用這種功能之前，必須先找到十六進制代碼的RGB值。