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

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 选择器仅当主体具有“green”类时才会将指定的颜色应用于主体，以及作为具有“green”类的元素 - !important 标志意味着它将覆盖在正常级联规则下可能优先的其他样式。您可以将第二个选择器更改为 .green *，以将其应用于“green”后代的所有元素类型。