Question

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.net/M5AQ4/

​

Answer 1

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.net/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”.