如何使用 JavaScript 更改元素的类

改变课程的现代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中不起作用，尽管在IE8和IE9中有一个shim来添加对它的支持，可从this page获得.然而，它正在变得越来越多.

简单的跨浏览器解决方案

Select 元素的标准JavaScript方法是使用document.getElementById("Id")，这就是下面的示例所使用的-您当然可以通过其他方式获取元素，在正确的情况下可以简单地使用this来代替-但是，详细介绍这一点超出了答案的范围.

要更改元素的所有类，请执行以下操作:

要用一个或多个新类替换所有现有类，请设置className属性:

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

(您可以使用空格分隔的列表来应用多个类.)

要向元素添加其他类，请执行以下操作:

要在不删除/影响现有值的情况下向元素添加类，请附加一个空格和新的类名，如下所示:

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

该正则表达式的解释如下:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # 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标志告诉替换根据需要重复.

要判断类是否已应用于元素，请执行以下操作:

上面用于删除类的相同正则表达式也可用于判断特定类是否存在:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

虽然可以直接在HTML事件属性(如onclick="this.className+=' MyClass'")内编写JavaScript，但不建议这样做.特别是在更大的应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易于维护的代码.

实现这一点的第一步是创建一个函数，并在onclick属性中调用该函数，例如:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.)}

第二步是将onclick事件从HTML中移到JavaScript中，例如使用addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(请注意，window.onload部分是必需的，以便在HTML完成加载后执行该函数的内容——如果没有它，调用JavaScript代码时MyElement可能不存在，因此该行将失败.)

JavaScript框架和库

上面的代码都是标准的JavaScript，但是，通常使用框架或库来简化常见任务，并从编写代码时可能没有想到的固定错误和边缘情况中获益.

虽然有些人认为，为了简单地改变类，添加一个50×kb框架是多余的，如果你正在做任何大量的java脚本工作或任何可能有异常的跨浏览器行为，那么它是很值得考虑的.

(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)

下面使用jQuery复制了上述示例，jQuery可能是最常用的JavaScript库(尽管还有其他值得研究的库).

(请注意，这里的$是jQuery对象.)

使用jQuery更改类:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

此外，jQuery还提供了一个快捷方式，用于在不适用的情况下添加类，或删除符合以下条件的类:

$('#MyElement').toggleClass('MyClass');

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

或者，不需要id:

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