作者：如果您是 Web 开发人员，您一定知道动态更改元素的 class 属性有多么方便。这种技术的好处有很多。
- 您可以将外观和感觉的任何更改都留给 CSS 处理。
- 您可以避免循环遍历大量元素，因为您可以让 CSS 通过为父元素分配一个 class 来完成这项工作。
- 您可以触发 CSS 过渡并避免编写自己的动画。
- 以及更多……
class 的问题在于，由于它在 DOM 中的表示方式，使用起来并不简单。当您读取 className 时，您会得到一个字符串，并且需要将其分割并使用正则表达式来查找是否使用了某个 class，以及其他各种麻烦。这也是 Web 开发人员面试中一个非常常见的问题，要求编写一个处理 class 的函数。
好吧，您可能没有意识到，HTML 有一种非常酷的新方法来处理 class，称为 classList。这使得在元素上添加、删除、切换和检查 class 变得非常容易——在您的浏览器中原生实现。您可以在 JSFiddle 上试用它。
您拥有的方法正是您真正需要的。
element.classList.add('foo')将 classfoo添加到元素（如果它已经存在，则不执行任何操作）element.classList.remove('foo')从元素中删除 classfooelement.classList.toggle('foo')交替地向元素添加和删除 classfooelement.classList.contains('foo')返回 class 是否应用于元素。element.classList.toString()返回所有 class 作为字符串（与读取className相同）。
浏览器支持非常好，IE 是唯一不支持的浏览器。但是，有一个 Eli Grey 提供的 polyfill 供您使用。
关于 Chris Heilmann
HTML5 和开放 Web 的布道者。让我们来修复它！
21 条评论