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 *，以将其应用于所有“绿色”下降的元素类型。

Answer 2

您正在设置将由其子项继承的BODY颜色，除非它们有自己的颜色设置。我建议您重新构建解决方案，例如通过添加＆＃34;绿色＆＃34; CSS类到BODY（document.body.className = "green";）并且你的样式表是这样的：

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

Answer 3

你可以使用javascript循环所有内容。

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

Answer 4

如果你计划使用jQuery，简单的解决方案：

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

Answer 5

您也可以尝试

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

我自己没有对此进行测试，但似乎合乎逻辑。

Answer 6

使用此

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

而不是

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

JSfiddle

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

6 个答案: