样式和类
通常有两种设置元素样式的方式：
- 在 CSS 中创建一个类，并添加它：
- 将属性直接写入 style：
ps:推荐写class
修改 class 的处理 className 和 classList
elem.className对应于class特性
<body>
<div id="root" class="main page">root</div>
<script>
alert(document.getElementById('root').className); // main page
</script>
</body>
注意： 如果使用 elem.className 进行赋值，将会把整个class替换掉
<body>
<div id="root" class="main page">root</div>
<script>
alert(document.getElementById('root').className); // main page
document.getElementById('root').className = 'change'
alert(document.getElementById('root').className); // change
</script>
</body>
通常我们希望添加/删除单个类, 这个时候就得使用 elem.classList
elem.classList 是一个特殊的对象，它具有 add/remove/toggle/contains 单个类的方法。
classList 的方法：
elem.classList.add/remove(class) — 添加/移除类。
elem.classList.toggle(class) — 如果类不存在就添加类，存在就移除它。
elem.classList.contains(class) — 检查给定类，返回 true/false。
<body>
<div id="root" class="main page">root</div>
<script>
const ele = document.getElementById('root')
alert(ele.className); // main page
// ele.className = 'change'
// alert(ele.className); // change
ele.classList.add('add')
alert(ele.className); // main page add
ele.classList.remove('page')
alert(ele.className); // main add
ele.classList.toggle('toggle')
alert(ele.className); // main add toggle
ele.classList.toggle('toggle')
alert(ele.className); // main add
alert(ele.classList.contains('add')) // true
</script>
</body>
- classList 也是可以迭代的
<body>
<div id="root" class="main page">root</div>
<script>
const ele = document.getElementById('root')
for (const item of ele.classList) {
console.log(item) // main page
}
</script>
</body>
元素样式 style
elem.style 属性是一个对象，它对应于 "style" 特性（attribute）中所写的内容
- 修改style的样式
let top = 10px;
let left = 20px
elem.style.left = left;
elem.style.top = top;
对于多词（multi-word）属性，使用驼峰式 camelCase：
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth
- 重置样式属性
当我们有一个
background不需要的时候，想要移除，可以设置为空字符串,此时浏览器通常会应用 CSS 类以及内建样式，如：
elem.style.background = 'blue'
setTimeout(() => elem.style.background = "", 1000); // 恢复正常
另外一个方式为 elem.style.removeProperty('style property')
elem.style.background = 'blue'
setTimeout(() => elem.style.removeProperty('background'), 1000); // 1 秒后移除
- 用
style.cssText进行完全的重写 (不推荐) 会删除所有现有样式：它不是进行添加，而是替换它们
elem.style.cssText = `color: green`
alert(elem.style.cssText); // color: green;
ps: 还有一个方法和cssText 一样及setAttribute
计算样式：getComputedStyle
我们无法使用 elem.style 读取来自 CSS 类的任何内容
<style> .computed { color: red; margin: 5px } </style>
<div id="computed" class="computed">计算样式</div>
<script>
const elem1 = document.getElementById('computed')
console.log(elem1.style.color) // 空
const computedStyle = getComputedStyle(document.body);
console.log(computedStyle.color) // rgb(0, 0, 0)
</script>
使用 getComputedStyle
<style> .computed { color: red; margin: 5px } </style>
<div id="computed" class="computed">计算样式</div>
<script>
const computedStyle = getComputedStyle(document.body);
console.log(computedStyle.color) // rgb(0, 0, 0)
</script>
总结
管理 class，有两个 DOM 属性：
className — 字符串值，可以很好地管理整个类的集合。
classList — 具有 add/remove/toggle/contains 方法的对象，可以很好地支持单个类。
要改变样式：
style 属性是具有驼峰（camelCased）样式的对象。对其进行读取和修改与修改 "style" 特性（attribute）中的各个属性具有相同的效果。
style.cssText 属性对应于整个 "style" 特性（attribute），即完整的样式字符串。
计算样式：
getComputedStyle 获取样式的值
