脚本化 CSS 类

通过内联 style 属性脚本化 CSS 样式的另一个可选方案是脚本化 HTML 的 class 属性值。改变 class 的属性值就相当于改变了元素的一组样式表选择器，它能在同一时刻改变多个 CSS 属性。

标识符 class 在 JavaScript 中是保留字，所以 HTML 属性 class 在 JavaScript 代码中对应于 className 属性：

function grabAttention(e) { 
  e.className = "attention"; 
}

function releaseAttention(e) { 
  e.className = ""; 
}

HTML5 为每个元素定义了 classList 属性，该属性值是 DOMTOkenList 对象：一个只读的类数组对象，该对象提供了一些很有用的方法：add() 用于添加一个类名，remove() 用于删除一个类名、toggle() 表示如果类名存在则删除，否则添加，还有 contains() 方法用于检测是否包含某个类名。

和其他 DOM 集合类型一样，DOMTOkenList 对象「实时地」代表了元素类名集合，而并非是在查询 classList 属性时类名的静态快照。