单击按钮时,如何将页面的字体颜色变为绿色

Question

例如,这是我的HTML代码:

?<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;
}?  

单击按钮时,我想将页面的字体颜色变为绿色:

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

但似乎只有默认的一个(黑色的)改变了,蓝色和红色的一个不起作用......
怎么能这样做？

在这里小提琴:http://jsfiddle.net/M5AQ4/

​

Answer 1

不是直接设置颜色,而是按如下方式为主体指定样式:

document.body.className += " green";

样式表中的"绿色"样式如下所示:

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

演示:http://jsfiddle.net/M5AQ4/5/

body.green, .green p样式表中的选择器仅在具有"绿色"类时将指定的颜色应用于主体,并且对于具有"绿色"类的元素的后代的任何p元素应用指定的颜色 - 该!important标志表示它将覆盖其他样式否则可能会在正常的级联规则下占优势.您可以更改第二个选择器以.green *将其应用于所有"绿色"下降的元素类型.