JavaScript更改class和id的方法

核心提示：是className，可不是class注意JavaScript使用的是className去访问class属性，JavaScript更改class和id的方法，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类，它修改作为计数器的<span>的class为toomuch

是className，可不是class

注意JavaScript使用的是className去访问class属性，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类。

我们在讨论style属性时遇到了棘手的细节问题和浏览器差异性带来的麻烦，正如同经历一场惊涛骇浪。而class和id的更改则像是沙漠里一片平静的绿洲，浏览器们在这里和谐相处。思考这个例子：

p {
color: #000000; /* black */
}
p.emphasis {
color: #cc0000; /* red */
}
<p id="test">Test</p>
最初，该段落没有定义class，所以它的字体颜色是黑色。不过，一行JavaScript就足以改变它的样式：

document.getElementById('test').className = 'emphasis';

瞬间文字变成了红色。如果想要改变回来，你可以按如下操作：

document.getElementById('test').className = '';

你移除了样式，该段落恢复到默认的p{}规则。

对于一个实际应用中的例子，看看“限长的文本输入区”。计数器有这样的结构和呈现样式（该结构由JavaScript动态生成，不过那不影响这个例子）：

<div class="counter"><span>12</span>/1250</div>
div.counter {
font-size: 80%;
padding-left: 10px;
}
span.toomuch {
font-weight: 600;
color: #cc0000;
}

当脚本发现用户输入的文字一定达到了最大长度，它修改作为计数器的<span>的class为toomuch：

[限长的文本输入区，第20～23行]

if (currentLength > maxLength)
this.relatedElement.className = 'toomuch';
else
this.relatedElement.className = '';
现在，作为计数器的<span>字体变成粗体和红色。