How can I change the font color of all texts of your website using Javascript?

Question

I learned, that there are ways to change the color of single texts. However I\'d like to find out how to change the color of all texts of my website at one time.

I foun

Answer 1

If you really want to change the color of all text on a web page using Javascript, then I would use the following code

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
 all[i].style.color = "red";
}

<div>This is text that will change colors!</div>
<div id="SomethingOtherAnswersWontChange"><span style="color:green;">Other answers will leave this text green.</span></div>

It's not exactly optimal, but it is robust. This code will change the font/text color of every element. It does this by looping through every element in the webpage and modifying the style of the elements to apply the CSS attribute "color: red;".

It is important to bear in mind that for very large web pages, this method might be a little slow, but it should get the job done.

Note: I am not 100% sure, but circumstantial CSS classes like a:hover might not be affected by this.

Answer 2

Use the CSS color property:

CSS

* {
   color:  [color-value];
}

This will change the font color of all elements using the universal (*) selector. If necessary, you may need to use the !important declaration (not recommended, but useful: see link) to override other styles.

JavaScript

document.body.style.color = [color-value];

Answer 3

Use .color instead of using .backgroundColor.

document.body.style.color = "red";

<div>This is text that will change colors!</div>

As stated in the comments above, you should really think about using CSS like this:

body{
  color:red;  
}

<div>This is text that will change colors!</div>