1

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.

oRookie
  • 265
  • 2
  • 4
  • 13
  • 7
    You need to learn about [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) – Marc B Aug 08 '16 at 15:32
  • 2
    It would be much better to change it within your `css` file rather than with javascript. – NTL Aug 08 '16 at 15:32
  • 1
    are you able to change the `CSS` file? – Adjit Aug 08 '16 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 Aug 08 '16 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 Aug 08 '16 at 15:36
  • you can use javascript like this:`element.style.STYLENAME = 'VALUE'`. Example: `element.style.fontSize = '10px'` EDIT: use this site: [w3schools.com - style property](https://www.w3schools.com/jsref/prop_html_style.asp) – Mr PizzaGuy Nov 20 '19 at 14:05

3 Answers3

9

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.

Spencer D
  • 3,376
  • 2
  • 27
  • 43
  • 1
    Note confirmed: `a:hover` is not found by this method. There is no proper way to set it from JavaScript. You could use a trick by [inserting a style sheet](http://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript) to change the color, but you'd run again into the problem of having to make the selector specific enough again, which you could probably fix by using @LambdaNinja's solution of adding `!important`. So your answers combined should result in a pretty high coverage. ;-) – GolezTrol Aug 08 '16 at 16:00
5

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];
miken32
  • 42,008
  • 16
  • 111
  • 154
Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94
0

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>
Wowsk
  • 3,637
  • 2
  • 18
  • 29
  • 1
    Similar to the example OP gave, but that example is there for lack of understanding. It's unlikely that this will work for fonts too, since some elements, most notably links, will have a custom color already in the browser style sheet, and are likely unaffected by this code. – GolezTrol Aug 08 '16 at 15:37
  • 1
    @GolezTrol, exactly the issue I mentioned in my comment on OP's question. Glad to see someone else thought about this. Wowsk, if the color is specified for a subelement, then your method fails. Your method will only succeed for elements within the body that do *not* have a separate style specifying a color. For example, try adding this to your answer's code: `
    This text will show as green, despite the code attempting to make it red.
    ` Suddenly your code will not be able to change *all* text/font colors.     – Spencer D Aug 08 '16 at 15:42