使用Vanilla JS查找和替换具有某种颜色的所有元素的最佳方法是什么?

Question

我有一个页面，旨在由用户根据他们想要的颜色进行白标。我专门为需要白标的所有内容选择了颜色 #E2122F，并认为我可能会编写一些脚本来扫描文档的样式表或页面以查找和更改/覆盖任何"#E2122F"实例到用户想要的任何内容。这可能吗？

到目前为止，我已经尝试使用此代码：

var elements = document.getElementsByTagName("*");
var colour = "RGB(226, 18, 47)";
var userColour = "#ff9343";
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.color = colour) {
elements[i].style.color = userColour;
}
}

这似乎改变了所有其他没有colour值的元素的 CSS。我也尝试使用.filter但没有运气。

实现我正在寻找的目标的最佳方式是什么？

为了澄清，这里有一些虚拟的HTML和CSS：

var elements = document.getElementsByTagName("*");
var colour = "#F44";
var userColour = "#FF1";
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.color == colour) {
elements[i].style.color = userColour;
}
}

a {
color: #F44;
}
.button {
font-weight: bold;
padding: 1rem;
border-radius: 2px;
display: inline-block;
line-height: 1;
color: white;
cursor: pointer;
text-decoration: none;
border: none;
letter-spacing: 0.05rem;
text-align: center;
}
.button.primary {
background-color: #F44;
color: white;
}

<h1>Hello</h1>
<p>This text should be black <a href="#">but this text should be red</a></p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda molestiae corporis <a href="#">nesciunt ut quis, explicabo quasi similique</a> amet vitae dolores voluptatem voluptates quos eos tempora dolor possimus recusandae rem omnis! Ea, <a href="#">adipisci veniam?</a>  Aliquid corrupti assumenda nulla aperiam, facilis fuga.</p>
<div class="button primary">Submit</div>

Answer 1

要记住的两件事：

1. 不要将颜色值与#FF0000或red或chucknorris之类的东西进行比较。将它们与解析值进行比较，例如rgb(255, 0, 0).
2. 不要使用elem.style.color，因为它只会返回style属性中定义的颜色。

最好使用window.getComputedStyle来测试应用于元素的实际颜色：

var tests = document.getElementsByClassName("test");
var i;
for (i = 0; i < tests.length; i++) {
console.log(tests[i]);
console.log("elem.style.color = " + tests[i].style.color);
console.log("getComputedStyle(elem).color = " + getComputedStyle(tests[i]).color);
}

.redtext {
color: #FF0000;
}

<p></p>
<div class="test" style="color: #FF0000;">Test</div>
<div class="test" style="color: #F00;">Test</div>
<div class="test" style="color: red;">Test</div>
<div class="test redtext">Test</div>

话虽如此，如果颜色嵌入在样式表中(并且样式表嵌入或托管在同一域中(，那么最好更改样式表：

[...document.styleSheets].forEach(function(styleSheet) {
var cssRules;
try {
cssRules = styleSheet.cssRules;
} catch (e) {
// most probably a cross-origin stylesheet
return;
}
[...cssRules].forEach(function(cssRule) {
if (cssRule instanceof CSSStyleRule && cssRule.style.color === "rgb(255, 68, 68)") {
cssRule.style.color = "#008000";
}
});
});

a {
color: #F44;
}
.wlabel {
color: #F44;
}
.button {
display: inline-block;
padding: 1rem;
color: white;
}
.button.primary {
background-color: #F44;
}

<h1>Hello</h1>
<p>This text should be black <a href="#">but this text should be green</a></p>
<p>This text should be black <span class="wlabel">but this text should be green</span></p>
<div class="button primary">Submit</div>