Estoy trabajando en esta respuesta , excepto con Javascript puro, y no con jquery. Intenté cambiar todos los elementos que tienen una asignación de color a un color rosa. Estoy caminando a través de los elementos hacia atrás en mi bucle. Inyectar este código en https://en.wikipedia.org/wiki/Main_Page , por ejemplo, solo cambia algunos colores de fondo; dejando muchos intactos, aunque la inspección del elemento tiene una propiedad de color CSS. ¿Cómo es que esta asignación de color no afecta a todos los elementos de la página que tienen una propiedad de 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); })Su sentencia if: if (!allEl[i].style[prop]) continue; continúa cada vez que encuentra un elemento en el que el estilo no está configurado en línea . Usando if (!window.getComputedStyle(allEl[i],null).getPropertyValue(prop)) continue; establece toda la página de color rosa...