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 found the document.body.style.backgroundColor = "black"; function and hoped that there would be something similar for fonts.

Edit: I am sorry. I guess I was misleading some people. I know what CSS is ofcourse... I wanted to find a way to change the colors while using the website. So I'd like to find a way to change the CSS properties via JavaScript.

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 found the document.body.style.backgroundColor = "black"; function and hoped that there would be something similar for fonts.

Edit: I am sorry. I guess I was misleading some people. I know what CSS is ofcourse... I wanted to find a way to change the colors while using the website. So I'd like to find a way to change the CSS properties via JavaScript.

• javascript
• html

• 7 You need to learn about CSS – Marc B Commented Aug 8, 2016 at 15:32
• 2 It would be much better to change it within your css file rather than with javascript. – NTL Commented Aug 8, 2016 at 15:32
• 1 are you able to change the CSS file? – Adjit Commented Aug 8, 2016 at 15:33
• document.body.style.backgroundColor = "black"; also changes the background color of just a single element. If all the other elements are transparent, it may seem as if you change the background for all of them. Same with fonts, although the chance is very small that no element has its own font-color set. – GolezTrol Commented Aug 8, 2016 at 15:35
• @NTL, it might be a script running externally (like a userscript running in GreaseMonkey/TamperMonkey). OP, what you are changing is a CSS property (which is not a function, by the way). You could try document.body.style.color = "black";, but that could be overridden by the specific CSS properties of sub-elements/child-nodes. – Spencer D Commented Aug 8, 2016 at 15:36

3 Answers 3

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.

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

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>