如何使用JavaScript更改元素的class

现代HTML5技术更改class

现代浏览器已经添加了classList API，这使得操作class非常简单，无需借助任何库：

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');

不过，这些方法在IE10之前的版本中是不可用的，不过可以通过这个页面获取针对IE8和IE9的shim来增加支持。幸运的是，越来越多的浏览器支持这些方法。

跨浏览器解决方案

标准JavaScript方式选择元素是使用document.getElementById("Id")，以下示例均采用此方法。不过，你可以用其他方式获取元素，也可以在合适的情况下直接使用this——但这超出了本文的讨论范围。

更改元素的所有class：

要用一个或多个新class替换元素的所有现有class，可以设置className属性：

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

（可以使用空格分隔的列表来应用多个class。）

为元素添加额外的class：

要在不删除/影响现有class的情况下为元素添加一个class，可以附加一个空格和新的class，如下所示：

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

从元素中移除一个class：

要从元素中移除单个class而不影响其他可能存在的class，需要使用简单的正则表达式替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' );
// 代码为了可读性进行了换行 - 实际上是一个语句

这个正则表达式的解释如下：

(?:^|\s) # 匹配字符串的开头或任何单个空白字符
MyClass  # 要移除的class名的字面文本
(?!\S)   # 负向先行断言，确保上述匹配是整个class名
         # 确保后面没有非空白字符
         # （即必须是字符串的结尾或空格）

标志g表示全局匹配，以防class名被添加了多次。

检查元素是否已经应用了某个class：

同样的正则表达式还可以用于检查元素是否包含某个特定的class：

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

将这些操作分配给onClick事件：

虽然可以直接在HTML事件属性（如onClick="this.className+=' MyClass'"）中编写JavaScript，但不推荐这样做。特别是在大型应用程序中，更可维护的代码是通过将HTML标记与JavaScript交互逻辑分离来实现的。

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

<script type="text/javascript">
    function changeClass(){
        // 上面的代码示例
    }
</script>
...
<button onClick="changeClass()">My Button</button>

（不需要在script标签中包含这些代码，这仅仅是为了简洁示例，将JavaScript包含在独立的文件中可能更适合。）

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

<script type="text/javascript">
    function changeClass(){
        // 上面的代码示例
    }

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

（注意window.onload部分是必须的，以确保该函数的内容在HTML加载完成后执行——否则，MyElement可能在JavaScript代码被调用时尚不存在，所以代码会失败。）

JavaScript框架和库

以上代码全部是标准JavaScript，但通常会使用框架或库来简化常见任务，并从中受益于修复的错误和边缘情况，这些情况你在编写代码时可能未考虑到。

虽然有些人认为仅仅为了改变class而添加一个约50KB的框架是过分的，但如果你在编写大量JavaScript代码或涉及可能有不寻常的跨浏览器行为，值得考虑使用框架或库。

（大致来说，一个库是一组为特定任务设计的工具，而框架通常包含多个库并执行一整套任务。）

以下例子使用了jQuery，可能是最常用的JavaScript库（尽管还有其他值得研究的库）。

（注意，$ 是 jQuery 对象。）

使用jQuery改变class：

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))

此外，jQuery还提供了一个快捷方法，可以在class未应用时添加该class，或在class已应用时移除该class：

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

使用jQuery将函数分配给click事件：

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

或者，不需要id：

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