JavaScript修改CSS有4种方法：
修改节点style(内联样式);
改变节点class或id;
写入新的css;
替换页面中的样式表。
不建议使用后两种方法，几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。
修改节点style(内联样式)
这种方法权重是最高的，直接写在节点的style属性上，他会覆盖其他方法设置的样式。使用方法很简单：
var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏
但是要注意的是，有些CSS样式名称是由几个单词组成的例如font-size、background-image等，他们都是用破折号(-)连接起来的，然而JavaScript中破折号表示“减”，因此不能作为属性名称。我们需要使用“驼峰格式(camelCase)”来书写属性名，例如fontSize、backgroundImage。
还要注意的是，很多style都是有单位的，不能只给一个数字。例如fontSize的单位有px、em、%(百分比)等。
更改class、id
id和class是设置样式的“钩子”，更改之后浏览器会自动更新元素的样式。
更改id的方法和class的类似，但是个人并不建议这样使用，因为id是用于定位元素的，最好不要用它来定义元素的显示样式，并且id也常作为JavaScript的钩子，可能会引起不必要的错误。
在JavaScript中，class是一个保留关键字，因此使用className作为访问元素class的属性，例如：
.redColor{
color: red;
}
.yellowBack{
background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class
改变 HTML 元素的样式，一般请使用这个语法：
document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="id1">标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>
下一节