Question

如何使用JavaScript的className属性改变网页的样式？

Answer 1

网页的样式一般都定义在了css的文件中，而JavaScript中的className的属性能让css中的样式动态的应用到网页的元素上。比如，在css中有样式.example。代码如下：
.example {
color: #fff;
font-size 1em;
text-align: right;
}

要用JavaScript动态的应用到网页上，可以使用如下类似的代码：
function preparePage() {
//当mainContent元素被点击，mainContent的样式将会改变
document.getElementById("mainContent").onclick = function() {
//检查当前mainContent的样式，若是example，则将样式取消。
//取消样式直接将className属性赋值为空字符串””就行。
//若mainContent的样式不是example，则应用example样式。
if( document.getElementById("mainContent").className == "example") {
document.getElementById("mainContent").className = "";
} else {
document.getElementById("mainContent").className = "example";
}
};
}

window.onload = function() {
preparePage();
}

通过上面的JavaScript代码，我们可以通过点击来控制mainContent元素的样式。上面的代码是从秒秒学上扣出来的，如果你想要完整的案例，可以在秒秒学的《使用JavaScript美化界面》一章中找到。

Answer 2

给网页写针对某个类的 CSS，然后用 JS 把某个元素的 className 修改成那个类名就可以了