For example, this is my html code:

​<p style="color:blue">​I'm Blue</p>
<p id="p_red">I'm Red​</p>
<p>​I'm default, black</p>
<input type="button" id="btn" value="Set color" />  

css:

​#p_red{
    color: red;
}​  

I'd like to turn the page's font color to green when the button is clicked:

document.getElementById("btn").onclick = function(){
    document.body.style.color = "green";
}​;​  

But it seems that only the default one(the black one) changed, the blue and red one doesn't work...
How could do this?

Fiddle here: /

​

For example, this is my html code:

​<p style="color:blue">​I'm Blue</p>
<p id="p_red">I'm Red​</p>
<p>​I'm default, black</p>
<input type="button" id="btn" value="Set color" />  

css:

​#p_red{
    color: red;
}​  

I'd like to turn the page's font color to green when the button is clicked:

document.getElementById("btn").onclick = function(){
    document.body.style.color = "green";
}​;​  

But it seems that only the default one(the black one) changed, the blue and red one doesn't work...
How could do this?

Fiddle here: http://jsfiddle/M5AQ4/

​

• javascript
• css

• You should work with jquery, it will be easier to achieve what you want – Pascal Piché Commented Mar 6, 2012 at 6:26
• 2 jQuery isn't needed for this, just an understanding of style inheritance and how to remove, add, or change styles. It's worth noting that well-constructed markup also makes the job much easier. If you were exclusively using classes, you wouldn't have to worry about the brute-force power of the inline style. ;-) – Greg Pettit Commented Mar 6, 2012 at 6:29

6 Answers 6

Rather than setting the colour directly, assign a style to the body as follows:

document.body.className += " green";

Where the "green" style is in your stylesheet as follows:

#p_red{
    color: red;
}
body.green, .green p {
    color: green !important;
}

Demo: http://jsfiddle/M5AQ4/5/

The body.green, .green p selector in the stylesheet will apply the specified colour to the body only when it has the "green" class, and to any p elements that are descendents of an element that has the "green" class - the !important flag means it will override other styles that might otherwise have taken precendence under normal cascade rules. You can change the second selector to .green * to apply it to all element types that are descendts of "green".

You are setting the BODY color which will be inherited by its children UNLESS they have their own colors set. I suggest that you restructure your solution, e.g. by adding a "green" CSS class to BODY (document.body.className = "green";) and having your stylesheet like this:

body.green, body.green * {
  color: green !important;
}

You could loop everything with javascript.

var elms = document.getElementsByTagName('*'); 
for(var x in elms) 
{
    elms[x].style.color = 'green'; 
}

and if you do plan on using jQuery, simple solution:

$("p").each(function (i) {
    this.style.color = "green";
});

You could also try

$('*').css({"color":"green"});

I have not tested this myself but seems logical.

Use this

$("*").css("color", "green");

Instead of

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

JSfiddle