如何使用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 添加对它的支持，可从此页面获得。但是，它得到了越来越多的支持。

简单的跨浏览器解决方案

选择元素的标准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 事件属性（如 ）中编写 JavaScript，但这不是推荐的行为。特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分开，可以实现更多可维护的代码。onclick="this.className+=' MyClass'"

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

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

_{（不需要在脚本标记中包含此代码，这只是为了示例的简洁性，并且将JavaScript包含在不同的文件中可能更合适。}

第二步是将 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的框架来简单地更改一个类是过分的，但如果你正在做大量的JavaScript工作或任何可能具有不寻常的跨浏览器行为的东西，这是非常值得考虑的。

（非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一组完整的职责。

上面的例子已经使用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);

您也可以只做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

并切换一个类（如果存在，则删除，否则添加它）：

document.getElementById('id').classList.toggle('class');