本人已参与新人「创作礼活动」，一起开启掘金创作之路。
一、重点API
1.1 操作样式的方法
分为读、写两种，即获取、设置。
元素.style.属性名：仅支持获取行内样式，即明确写在元素的 style 属性上的样式；window.getComputedStyle，返回的是计算后的包含了所有样式CSSStyleDeclaration 类型的对象；如果获取的样式没有设置，则会获取真实值，而不是默认值，如：没有设置width,不会获取auto,而是当前真实的长度；document.styleSheets：返回一个StyleSheetList/CSSStyleSheet对象，这个对象对应的是通过引入或者嵌入文档中的样式表；即对象中的cssRules(或rules)包含外链<link>和内部<style>标签写入的样式，但只能读取到内部样式(保持原样未计算)，不能读取到行内、外链及计算后的样式；- 设置或修改 CSS 属性:
ele.style.setProperty;
总结： 以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。
/* 设置或修改 CSS 属性 */
:root { --theme_primary_color: #4279fd }
document.documentElement.style.setProperty('--theme_primary_color', this.theme['--theme_primary_color']);
或
const declaration = document.styleSheets[0].cssRules[0].style;
const setprop = declaration.setProperty("background-color", "yellow");
cssRules(或rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。
style与getComputedStyle异同
| 相同点 | 不同点 |
|---|---|
| 1、二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法 | 1、element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。 2、element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式 |
