How come this color assignment is not affecting all elements on the page?

Question

I'm working off this answer, except with pure Javascript, and not jquery. I've attempted to change all elements that have a color assignment to a pink color. I'm walking through the elements backwards in my loop. Injecting this code on https://en.wikipedia.org/wiki/Main_Page, for example, only changes a few background colors; leaving many untouched, even though inspecting the element has a CSS color property. How come this color assignment is not affecting all elements on the page that have a color property?

// 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);
})

`for/in` loops should be used to iterate objects, not arrays. For arrays, use counting loops or `.forEach()`. — Scott Marcus, Jan 11 '22 at 18:17

score 1 · Accepted Answer · answered Jan 11 '22 at 19:00

Your if statement: if (!allEl[i].style[prop]) continue; is continuing anytime it encounters an element wherein the style is not set inline. Using if (!window.getComputedStyle(allEl[i],null).getPropertyValue(prop)) continue; sets the whole page pink...

How come this color assignment is not affecting all elements on the page?

1 Answers1