04. class 和 style

JS 可以修改 class 和 style

修改 class

elem.className

对应 HTML 的 class 特性，表示元素的 class 字符串，赋值会替换整个字符串

为啥不叫 elem.class ？因为早期 class 是对象里的保留字

elem.classList

操作 class 的对象，可进行单个 class 的操作

有以下方法：

• add/remove(class)： 添加/移除类
• contains(class)： 检查给定类，返回 true/false
• toggle(class)： 如果类不存在就添加类，存在就移除它

修改 style

elem.style

是一个对象，对应 HTML 的 style 属性中所写的内容（对于多词（multi-word）属性，使用驼峰式 camelCase）

如：

• styleText：整个样式文本（以字符串的形式设置完整的样式，进行完全的重写）
• width：宽度
• height：高度
• fontSize：字体大小
• removeProperty('style property')：移除一个样式
• …

setAttribute

也可以使用 elem.setAttribute('style', 'color: red...') 设置整个样式文本

重置样式

1. 对 elem.style.xxx 赋值为 空字符串 会重置某个样式为 原始样式
2. elem.style.removeProperty('style property') 移除某个样式

计算样式

getComputedStyle(element, [pseudo])：获取最终应用在元素上的所有样式值，返回带单位的字符串

Warning

不要用 getComputedStyle 读取元素的 width/height

1. CSS width/height 取决于一个属性：box-sizing
2. CSS 的 width/height 可能是 auto
3. 不同浏览器对滚动条处理不一致，有的包括，有的不包括

应该使用 clientWidth或clientHeight