What is the best way to find and replace all elements with a certain colour using Vanilla JS?

Question

I have a page that is intended to be white-labelled by the user based on the colour they want. I had specifically picked the colour #E2122F for everything that needs to be white-labelled and figured that I could probably write some script to either scan the document's stylesheet or the page to find and change/overwrite any instance of "#E2122F" to whatever the user wants it to be. Is this possible?

So far, I've tried using this code:

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

This seems to change the CSS for all the other elements that DON'T have the colour value. I've tried using .filter as well with no luck.

What would be the best way to achieve what I'm looking for?

To clarify, here's some dummy HTML and 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>

You made a typo. Your `if` statement contains an **assignment** instead of a **comparison**. (Also you didn't include any HTML. You should provide a [mcve] using the live demo feature of the question editor.) — Quentin, Nov 26 '19 at 13:39
In the if statement, change `=` into `==`. Using one `=`, you are assigning the value. What you want to achieve is to compare the two values. — Armedin Kuka, Nov 26 '19 at 13:46
@Quentin just included some more code in the OP. Apologies. I'm still getting used to using SO. — jimjamjosh, Nov 27 '19 at 07:23
Good work with the example but could you please replace all `#E2122F` (etc) with simpler colors such as red (#FF0000), blue (#0000FF) etc. Right now your example code seems to work as-is. — Salman A, Nov 27 '19 at 07:29
@SalmanA - done, though it doesn't seem to work (for me at least) — jimjamjosh, Nov 27 '19 at 07:46

Salman A · Accepted Answer · 2019-11-27T08:24:40.980

Two things to keep in mind:

Do not compare a color value with something like #FF0000 or red or chucknorris. Compare them with resolved values e.g. rgb(255, 0, 0).
Do not use elem.style.color as it will simply return the color defined inside the style attribute.

It would be best to use window.getComputedStyle to test the actual color applied on the element:

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>

Having said that, if the color is embedded inside a stylesheet (and the stylesheet is embedded or hosted on same domain) then it would be best that you alter the stylesheet:

[...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>

Thank you so much. This solved the issue beautifully. The stylesheet solution was exactly what I was looking for! — jimjamjosh, Nov 27 '19 at 08:35

What is the best way to find and replace all elements with a certain colour using Vanilla JS?

1 Answers1