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

划水无痕

如何更改 HTML 元素类以响应onclick使用 JavaScript 事件或其他事件？
+ I& M! R# u7 S) I+ t                                                               
+ I& s3 y+ ]# x0 c$ [. H    解决方案:                                                               
                                                                现代 用于改变类别HTML5 技术添加了现代浏览器classList，在没有库的情况下，它提供了一些更容易操作的方法：
& ]3 z' h, p, D0 F% ~

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 属性：

document.getElementById("MyElement").className = "MyClass";
6 Z: t" Z: a- ^5 a7 P) j

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

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

删除元素中的一个类：在不影响其他潜在类别的情况下，需要简单的正则表达替换：
% d4 N! ^# @7 s# L' I

document.getElementById("MyElement").className =   document.getElementById("MyElement").className.replace     ^|\s)MyClass(?!\S)/g ,'' )/* Code wrapped for readability - above is all one statement */
# X$ w5 w  b* j; _. e- W

正则表达式的解释如下：
3 v9 E" I3 v1 j+ p8 p8 I

(?:^|\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)
% b! i. l0 s  t) X* b/ {

该g根据需要重复标志告换，以防止多次添加类名。
, i; b: ~% \5 h检查一个类是否已应用于一个元素：同样的正则表达式也可以用来检查特定类是否存在：
  j! L2 Y  N1 a3 d8 p2 l) [

• if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)())(/))(/))(/)(/))(/))(/))(/))(/)))(/)(/)))(/))(/)))(/)))(//)))(/))))(//)))/)(/)))//))(/)(/)/)/)/)/)//)/)//)/)//)/)//)//)//)//)//)//)/)//)//)//)//)//)///)//)//)//)//)///)///)///)///)///)///)///)///)///)///)////)////)///)///)///)//)///)//)///)//)//)//)/////)////)/)////////)/////)/)/////)///)/)///)/)//)/)///)////)///)/)////)/////)/)////)//)///)/)///)////)/)/)/)/)/////////)//)//)/)//////////)/////)/)////)//////)///////)/)//)//)//)////)///)/////)///////)/)///////)//////)/)/)/)/)/)/)////)////////)/)////////)/)//)/)/)/)/)//////////////////)/)/)//)//////)/////)/)////)/////)/)/)/)/)/////////////////)/code]### 将这些操作分配给  onclick 事件：
  * m! Z5 W4 t/ {4 K+ p( R
• 虽然可以直接在 HTML 事件属性(例如onclick="this.className =' MyClass'"）中编写 JavaScript，但不推荐这种行为。特别是在较大的应用程序中，通过 HTML 标记与 JavaScript 交互逻辑分离实现更可维护的代码。
  - v" q* x7 _0 w  j
• 实现这一点的第一步是创建函数函数onclick 在属性中调用函数，如：[code]...My Button
  0 J$ P, x7 r- g* @1 i5 r/ t/ }

(这个代码不需要在脚本标签中，只是为了简化示例， JavaScript 可能更适合在不同的文件中包含。
第二步是 onclick 事件从 HTML 中移到 JavaScript 中，如使用addEventListener
( O9 x3 K1 ~0 _) \( m  n0 Q

...My Button

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

) K! O# f3 ~* {* g# g
• $('#MyElement').addClass('MyClass');$('#MyElement').removeClass('MyClass');if ( $('#MyElement').hasClass('MyClass)code]此外，jQuery 提供了添加不适用类或删除适用类的快速方法：[code]$('#MyElement').toggleClass('MyClass');
  , ~. `  x) t: ?* K: R( x

### 使用 jQuery 将函数分配给单击事件：
% |: q) d- }& v1 i

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

或者，不需要 id：

$(':button:contains(My Button)').click(changeClass);
- g+ T8 i9 |1 J7 ~# Q