為什么這種顏色分配不會影響頁面上的所有元素？-有解無憂

我正在解決這個答案，除了純 Javascript，而不是 jquery。我試圖將所有具有顏色分配的元素更改為粉紅色。我正在回圈中向后遍歷元素。例如，在https://en.wikipedia.org/wiki/Main_Page上注入此代碼只會更改一些背景顏色；即使檢查元素具有 CSS color 屬性，也留下許多未觸及的內容。為什么這種顏色分配不會影響頁面上具有顏色屬性的所有元素？

// CSS properties that can change color
let CSSPropsColor =
[
"background",
"background-color",
"text-shadow",
"text-decoration-color",
"text-emphasis-color",
"caret-color",
"border-color",
"border-left-color",
"border-right-color",
"border-top-color",
"border-bottom-color",
"border-block-start-color",
"border-block-end-color",
"border-inline-start-color",
"border-inline-end-color",
"column-rule-color",
"outline-color",
"color",
]

function pinkAll()
{
    // get all elements
    var allEl = document.getElementsByTagName("*");
    
    // walk backwards through loop
    for (var i=allEl.length-1; i > -1; i--) {
            var color = null;
            
            for (var prop in CSSPropsColor) {
                prop = CSSPropsColor[prop];
                
                //if we can't find this property or it's null, continue
                if (!allEl[i].style[prop]) continue;
                
                var bgColor = window.getComputedStyle(allEl[i],null).getPropertyValue(prop).toString();
                
                let firstChar = bgColor.charAt(0);
                
                if(firstChar !== "r" && firstChar !== "#") continue;
                
                allEl[i].style[prop] = "#EC00FF" // change element color to PINK
                
            }
    }
}

window.addEventListener('load', function () {
    // sometimes 'load' is not enough, and I have to wait a bit
    let timeout = setTimeout(pinkAll, 500);
})

uj5u.com熱心網友回復：

您的 if 陳述句： if (!allEl[i].style[prop]) continue;在遇到未設定樣式的元素時會繼續inline。使用if (!window.getComputedStyle(allEl[i],null).getPropertyValue(prop)) continue;將整個頁面設定為粉紅色...

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/408525.html

標籤：

上一篇：如何使用javascript向用戶發送電子郵件

下一篇：定時器在0后繼續