想设置一个 HTML 元素的类名，不能直接“打点”设置.class 属性而是应该使用.className 属性，这是因
为 class 是 JavaScript 中的关键字，应该避讳。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//得到 box 盒子
var oBox = document.getElementById("box");
//设置类名
oBox.className = "one";
</script>
</body>
</html>
页面上的 div 盒子并没有任何类名，我们书写 JavaScript 代码更改了 oBox 的 className 属性，从而给
div 盒子设置了类名。打开浏览审查元素功能的“Elements”面板，即可看到 div 盒子被成功加上了类名
改变 CSS 样式
改变 HTML 元素的 CSS 样式是开发网页特效时频繁使用的功能。通过这样的语法来设置 HTML 元素的 CSS 样
式：
oDiv.style.backgroundColor = "red";
要先“打点”调用 style 属性，然后再次“打点”访问需要更改的 CSS 属性的名字，进而通过等号设置样
式。需要注意的是，CSS 属性的名字必须变为驼峰写法，比如：
background-color 要变为 backgroundColor
font-size 要变为 fontSize
border-top-color 要变为 borderTopColor
看一个案例演示：
<div id="box"></div>
<script type="text/javascript">
//得到 box 盒子
var oBox = document.getElementById("box");
//设置样式
oBox.style.backgroundColor = "red";
oBox.style.width = "200px";
oBox.style.height = "200px";
</script>
程序中用 JavaScript 设置了 3 条 CSS 样式。要注意，CSS 属性值的单位是
不能少的，“200px”不能简写为 200。
值得一提的是，JavaScript 设置元素的 CSS 样式实际上设置的是行内样式。打开浏览审查元素功能的
“Elements”面板即可证明这点
实战案例：表格隔行变色
想让表格产生隔行变色的效果，改怎么办呢？我们总不能手动给所有奇数行或者偶数行设
置某个类名，这个太麻烦了。使用 JavaScript 可以简化这种重复的工作。
案例代码如下（HTML 代码省略，只列出 JavaScript 代码）：
<script type="text/javascript">
//当网页已经加载完毕时运行
window.onload = function(){
//得到所有 tr
var oTrs = document.getElementsByTagName("tr");
//遍历它们，注意 i += 2 表示每次间隔 2
for(var i = 0 ; i < oTrs.length ; i += 2){
oTrs[i].className = "spec"
}
}
</script>
注意到程序中的 for 循环的循环增量为 i += 2，给所有下标为偶数的行增加了 spec 类名。
当然，别忘了事先在 CSS 中设置好 tr.spec 的样式：
tr.spec{
background-color: gold;
}