如何使用 JavaScript 更改元素的类？

划水无痕

如何更改 HTML 元素类以响应onclick使用 JavaScript 事件或其他事件？
                                                               
7 q+ T& s% m  t    解决方案:                                                               
' R. t+ d0 d1 d/ G) Z                                                                现代 用于改变类别HTML5 技术添加了现代浏览器classList，在没有库的情况下，它提供了一些更容易操作的方法：
% h  y5 p$ t$ u" f, Q% w

document.getElementById("MyElement").classList.add('MyClass');document.getElementById("MyElement").classList.remove('MyClass');if ( document.getElementById("MyElement").classList.contains('MyClass') )document.getElementById("MyElement").classList.toggle('MyClass');

不幸的是，这些都在 v10 之前的 Internet Explorer 不起作用，虽然有一个shim可以为 IE8 和 IE9 可以从这个页面添加支持。然而，它得到了越来越多的支持。
简单的跨浏览器解决方案选择元素的标准 JavaScript 方式是 using document.getElementById("Id")，这是如下示例所用 - 当然，你可以通过其他方式获得元素，在正确的情况下可以简单地使用它们this- 但是，超出范围的答案被详细解释。
所有要改变元素的类别：将所有现有类别替换为一个或多个新类别，请设置 className 属性：
, T9 z' z3 @1 `6 ^  J/ n

document.getElementById("MyElement").className = "MyClass";
: \( e; W) u' z

(您可以使用空间分隔列表来应用多个类别。
: q, v/ R2 ]) u( Z- h1 r添加附加元素：在不删除/影响现有值的情况下，将类添加到元素中，请添加空间和新的类名，如下所示：

document.getElementById("MyElement").className  = " MyClass";

删除元素中的一个类：在不影响其他潜在类别的情况下，需要简单的正则表达替换：

document.getElementById("MyElement").className =   document.getElementById("MyElement").className.replace     ^|\s)MyClass(?!\S)/g ,'' )/* Code wrapped for readability - above is all one statement */

正则表达式的解释如下：
1 O: {* ?+ z- @* o

(?:^|\s) # Match the start of the string or any single whitespace characterMyClass  # The literal text for the classname to remove(?!\S)   # Negative lookahead to verify the above is the whole classname         # Ensures there is no non-space character following         # (i.e. must be the end of the string or space)

该g根据需要重复标志告换，以防止多次添加类名。
' M- [5 |9 x/ G, e& Q; q) F9 e  [# j检查一个类是否已应用于一个元素：同样的正则表达式也可以用来检查特定类是否存在：

• if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)())(/))(/))(/)(/))(/))(/))(/))(/)))(/)(/)))(/))(/)))(/)))(//)))(/))))(//)))/)(/)))//))(/)(/)/)/)/)/)//)/)//)/)//)/)//)//)//)//)//)//)/)//)//)//)//)//)///)//)//)//)//)///)///)///)///)///)///)///)///)///)///)////)////)///)///)///)//)///)//)///)//)//)//)/////)////)/)////////)/////)/)/////)///)/)///)/)//)/)///)////)///)/)////)/////)/)////)//)///)/)///)////)/)/)/)/)/////////)//)//)/)//////////)/////)/)////)//////)///////)/)//)//)//)////)///)/////)///////)/)///////)//////)/)/)/)/)/)/)////)////////)/)////////)/)//)/)/)/)/)//////////////////)/)/)//)//////)/////)/)////)/////)/)/)/)/)/////////////////)/code]### 将这些操作分配给  onclick 事件：
  
• 虽然可以直接在 HTML 事件属性(例如onclick="this.className =' MyClass'"）中编写 JavaScript，但不推荐这种行为。特别是在较大的应用程序中，通过 HTML 标记与 JavaScript 交互逻辑分离实现更可维护的代码。
  
• 实现这一点的第一步是创建函数函数onclick 在属性中调用函数，如：[code]...My Button
  # R: O% c6 L9 D5 K  ~. l

(这个代码不需要在脚本标签中，只是为了简化示例， JavaScript 可能更适合在不同的文件中包含。
( o. O+ R! `1 m  s2 y# @第二步是 onclick 事件从 HTML 中移到 JavaScript 中，如使用addEventListener
# }$ Z) Q0 C+ y4 x: q

...My Button
$ y* E  K3 D/ l; P4 q8 ~- s

（请注意，window.onload 部分必须用于 HTML 完成加载后执行函数的内容- 没有这个，调用 JavaScript 代码时 MyElement 可能不存在，所以行会失败。
  d; m5 @& `* s/ j% dJavaScript 框架和库上述代码均为标准 JavaScript，然而，通常的做法是使用框架或库来简化常见的任务，并从编写代码时可能不会想到的固定错误和边缘条件中受益。
. r6 T7 H& o" C  ~# K虽然有些人认为加一个大约50 KB 简单地改变一个类的框架是过度的，但如果你正在做很多 JavaScript 工作或任何不寻常的跨浏览器行为都值得考虑。
(粗略地说，图书馆是为特定任务设计的一组工具，框架通常包含多个图书馆，并完整的职责。
5 o7 U. \& p4 J) z  F上述示例已在下面使用jQuery进行了复制，这可能是最常用的 JavaScript 库(虽然还有其他值得研究的库)。
（注意$这里是 jQuery 对象。）
$ p& ~% ~3 I- u: t使用 jQuery 更改类：

" h% r' O+ b" a
• $('#MyElement').addClass('MyClass');$('#MyElement').removeClass('MyClass');if ( $('#MyElement').hasClass('MyClass)code]此外，jQuery 提供了添加不适用类或删除适用类的快速方法：[code]$('#MyElement').toggleClass('MyClass');
  0 H3 k9 O" P2 J& R. m( r3 @

### 使用 jQuery 将函数分配给单击事件：

$('#MyElement').click(changeClass);

或者，不需要 id：
! c, {  ^; z* b* H

$(':button:contains(My Button)').click(changeClass);