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

划水无痕

如何更改 HTML 元素类以响应onclick使用 JavaScript 事件或其他事件？
8 X2 B! Y& ]8 D9 z- k                                                               
    解决方案:                                                               
                                                                现代 用于改变类别HTML5 技术添加了现代浏览器classList，在没有库的情况下，它提供了一些更容易操作的方法：

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 属性：
: r9 g* t/ P( i, g: F+ D2 K8 O

document.getElementById("MyElement").className = "MyClass";
: V8 h+ |/ @$ ?( O5 S: @

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

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 */

正则表达式的解释如下：
: u7 P; y# R! E4 Z& b, \

(?:^|\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)
/ X) D5 n* H+ `6 V

该g根据需要重复标志告换，以防止多次添加类名。
2 W1 |' @- u8 |) P+ l% R8 e1 b检查一个类是否已应用于一个元素：同样的正则表达式也可以用来检查特定类是否存在：

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

(这个代码不需要在脚本标签中，只是为了简化示例， JavaScript 可能更适合在不同的文件中包含。
第二步是 onclick 事件从 HTML 中移到 JavaScript 中，如使用addEventListener
( h4 L* g/ [2 L

...My Button
% E' A& v8 E% U% U

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

2 K# }8 G1 I6 ]; v& m/ g' m
• $('#MyElement').addClass('MyClass');$('#MyElement').removeClass('MyClass');if ( $('#MyElement').hasClass('MyClass)code]此外，jQuery 提供了添加不适用类或删除适用类的快速方法：[code]$('#MyElement').toggleClass('MyClass');
  

### 使用 jQuery 将函数分配给单击事件：
1 ~* m8 f8 N, e) i4 G

$('#MyElement').click(changeClass);
' Y" n/ f  s! I/ M2 G# Y4 K, Q! t! ^

或者，不需要 id：

$(':button:contains(My Button)').click(changeClass);
: C8 N9 w; ]0 d0 P