JavaScript更改class和id的方法

核心提示： id的变更以几乎完全一样的方式工作：p {color: #000000; /* black */}p#emphasis {color: #cc0000; /* red */}<p>Test</p>document.getElementsByTagName('

id的变更以几乎完全一样的方式工作：

p {
color: #000000; /* black */
}
p#emphasis {
color: #cc0000; /* red */
}
<p>Test</p>
document.getElementsByTagName('p')[0].id = 'emphasis';

该段落的文字再次变成了红色。但是，我建议你不要过多改变id。除了作为CSS的钩子，它们也常常作为JavaScript的钩子，改变它们可能存在不确定的副作用。

增加class

通常，你不会给一个元素的class设置新值，而只是添加一个class。因为你不希望移除元素已经拥有的任何样式。因为CSS允许复合样式，新class所包含的样式被添加到元素上，不会移除任何已经存在的class的CSS指令。

“表单验证”中的writeError()和removeError()函数是一个很好的例子。一般来说我会给表单域应用好几个class，因为图形设计师经常对输入框使用两个甚至三个宽度。当一个表单域包含错误的时候，我希望添加一个特别的警告样式，但我不希望搅乱该元素已经拥有的样式。所以，我不能简单地覆盖旧的class值，那样我将失去已经指定的宽度。

看这样的情形：

<input class="smaller" name="name" />
input.smaller {
width: 75px;
}
input.errorMessage {
border-color: #cc0000;
}

最开始，输入框的宽度是75px。如果脚本设置class为'errorMessage'并且删除旧值，表单域会得到一个红色的边框，但也失去了它的宽度，而那样的话可能会让用户感到非常迷惑。

因此，我是添加了errorMessage class：

[表单验证，第105～106行]

function writeError(obj,message) {

obj.className += ' errorMessage';

这段代码取得已存在的className并在其后附加一个新的class，在它之前加一个空格。这个空格分隔新的class和任何对象可能已经拥有的class值。现在输入框除了拥有75px宽度之外，如我们所愿地得到了红色边框。该表单域现在应用了两个class，HTML就好像这样：

<input class="smaller errorMessage" name="name" />

Class在Mozilla中的名称与空白

你可能注意到removeError()移除class的值errorMessage的时候没有前置的空格。那是因为一个浏览器的bug。当你添加errorMessage到一个原来没有值的class的时候，Mozilla会删除前置空格。如果我们随后执行replace(/ errorMessage/,'')，Mozilla不能移除class，它找不到字符串errorMessage，因为前置空格已经不在了。

移除class

一旦用户修正了她的错误，class的值errorMessage应该被移除，但任何原来的class，比如smaller，不应该受到影响。removeError()函数提供了这个功能：

[表单验证，第119～120行]

function removeError() {
this.className = this.className.replace(/errorMessage/,'');

它先取得元素的class然后替换字符串'errorMessage'为''（一个空字符）。errorMessage从class的值中被取走，但对其他的值没有影响。表单域失去了红色的边框颜色，但依然维持75px的宽度。