通常有两种设置元素样式的方式：
- 在
CSS中创建一个类，并添加它：<div class="..."> - 将属性直接写入
style：<div style="...">。
JavaScript 既可以修改类，也可以修改 style 属性。
相较于将样式写入 style 属性，我们应该首选通过 CSS 类的方式来添加样式。仅当类“无法处理”时，才应选择使用 style 属性的方式。
*例如将文本设为红色，添加一个背景图标 *
- 可以在
CSS中对这些样式进行描述，然后添加类（JavaScript 可以做到）。 - 这样更灵活，更易于支持。
1. 类名操作
elem.classList可以实现类名的基本操作
elem.classList 是一个特殊的对象，它具有 add/remove/toggle 单个类的方法。
例如：
<body class="main page">
<script>
// 添加一个 class
document.body.classList.add('article');
</script>
</body>classList 的方法：
elem.classList.add/remove(class)— 添加/移除类。elem.classList.toggle(class)— 如果类不存在就添加类，存在就移除它。elem.classList.contains(class)— 检查给定类，返回true/false。
2. 元素样式
elem.style 属性是一个对象，它对应于 "style" 特性（attribute）中所写的内容。
elem.style.width="100px" 的效果等价于我们在 style 特性中有一个 width:100px 字符串。
对于多词属性，使用驼峰式 ：
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth注意单位
例如，我们不应该将 elem.style.top 设置为 10，而应将其设置为 10px。
elem.style.属性名 只能获取行内样式
<body>
<script>
// 无效！
document.body.style.margin = 20;
alert(document.body.style.margin); // ''（空字符串，赋值被忽略了）
// 现在添加了 CSS 单位（px）— 生效了
document.body.style.margin = '20px';
alert(document.body.style.margin); // 20px
</script>
</body>3. 计算样式：getComputedStyle
*要读取所有 CSS 应用在元素上的最终值: *
getComputedStyle(element, [pseudo])element: 需要被读取样式值的元素。
pseudo: 伪元素（如果需要），例如 ::before。空字符串或无参数则意味着元素本身。
例如：
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
var body = document.body;
console.log(body.style.color); //获取不到 ,因为没有行内样式
var computedStyle = getComputedStyle(document.body);
// 现在我们可以读取它的 margin 和 color 了
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>4. 总结
要管理 class：
classList— 具有add/remove/toggle/contains方法的对象，可以很好地支持单个类。
要改变样式：
style属性是具有样式的对象。对其进行读取和修改与修改"style"中的各个属性具有相同的效果。
要读取已解析的样式（对于所有类，在应用所有 CSS 并计算最终值之后）：
getComputedStyle(elem, [pseudo])返回与style对象类似的，且包含了所有类的对象。只读。
文档更新时间: 2023-01-05 17:38 作者：孙老师
