javascript - How can I turn the page's font color to green when a button is clicked - Stack Overflow

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

Share Improve this question Follow edited Mar 6, 2012 at 6:32 Michael Durrant 96.7k101101 gold badges347347 silver badges531531 bronze badges asked Mar 6, 2012 at 6:23 wong2wong2 35.8k5151 gold badges137137 silver badges182182 bronze badges 2

• 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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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