JavaScript更改class和id的方法
更新时间：2008年10月10日 22:15:12 作者：
JavaScript允许你更改元素的class或id。当你更改之后，浏览器会自动更新元素的样式。
是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>字体变成粗体和红色。
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的宽度。
注意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>字体变成粗体和红色。
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的宽度。
相关文章
这篇文章主要为大家详细介绍了javascript实现点击产生随机图形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家介绍了使用canvas实现音乐频谱示例及技术分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了RxJS在TypeScript中的简单使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
下面小编就为大家带来一篇完美解决js传递参数中加号和&号自动改变的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了javascript性能优化之事件委托用法,结合实例形式对比分析了JavaScript中事件委托的具体用法与优点,需要的朋友可以参考下2015-12-12
之前讲了javascript对正则表达式的实现方式了，只定义了正则表达式，但是如何在javascript中真正使用正则表达式呢？在javascript中RegExp和String对象都有处理正则表达式的方法。2015-08-08
这篇文章主要介绍了深入学习JS XML和Fetch请求，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
深入探讨JavaScript中parseInt与Number数字转换方法的区别
在Javascript编程中,数字是一种常见的数据类型,经常需要在不同的情境下进行不同类型的操作,本文将深入探讨parseInt()和Number()的区别,通过代码示例和详细解释,帮助大家更好地理解它们的用途,需要的朋友可以参考下2023-08-08
识别操作系统是不是vista的js代码...2007-08-08
取消Bootstrap的dropdown-menu点击默认关闭事件方法
今天小编就为大家分享一篇取消Bootstrap的dropdown-menu点击默认关闭事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论