javascript - 使用 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 进行比较。将它们与 resolved values 进行比较例如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>