## 操作元素节点上的 style 属性 ```js // 多个单词使用驼峰 el.style.backgroundColor = "red"; el.stvle.fontSize = "1Opx"; // style.cssText 批量赋值 el.style.cssText ="background-color： green; font-size: 40px; ``` * * * ## classList - 可预先定义好 class 类名的样式，后面只需添加 class 即可达到切换样式的需求 ```js // 切换class，对应元素有此 class 则为删除，没有则为添加，第二个参数如果为 true，则单纯为添加类名 el.classList.toggle("className", true) // 添加类名 el.classList.add("aa", "bb") // 等同于 // el.className = "aa bb "; // 移除类名 el.classList.remove("aa" , "bb") ``` * * * ## 操作 style 节点内容 - style 本质上还是节点，可直接操作替换其内容 ```html 内容 ``` * * * ## 操作已有 style 节点 - CSSOM：CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 APl ```html 内容 ``` * * * ## 操作外部样式 ```html 内容 ``` * * * ## 动态创建 link 节点引入样式 ```js function importCssByUrl(url) { const link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; document.head.appendChild(link); } ``` * * * ## window.getComputeStyle - 返回一个对象，包含元素计算之后的 css 属性值 - 语法：`window.getComputedStyle(element, [pseudoElt])` pseudoElt 参数可以让它查询伪元素 - 注意此方式获取的是最终计算之后的样式值，而且会引起重排 ```html

云牧

``` * * * ## 重绘和重排 - 重排：元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排 - 重绘：元素样式的改变并不影响它在文档流中的位置或者尺寸的时候，例如：color, backgound-color, outline-color 等，浏览器会重新绘制元素，这个过程称为重绘 ```html

```