大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~
这是【从头学前端】系列文章的第四十三篇-《样式操作》
概述
到目前为止，我们已经学习的DOM中的三个核心对象，Document、Node、Element，但是我们发现，这说那个核心对象都是操作HTML标签的，页面中的主要有两个静态内容，一个是标签结构是静态的，另个一个是CSS样式是静态的；也就是说DOM中既可以操作HTML标签 也可以操作CSS样式。接下来我们就来看一下DOM是怎么对CSS样式进行操作的。
获取内联样式
通过getAttribute()方法
我们之前学习的Element.getAttribute()方法获取指定元素的属性值，如果不存在返回null或者空字符串，如果其中传入style这个属性名，就可以帮助我们获取到其内联样式，示例代码如下：
<body><div id="d1"style="width: 200px;height: 200px;border: 1px solid #000;"></div><script>var d1 = document.getElementById('d1')var style = d1.getAttribute('style')console.log(style) // width: 200px;height: 200px;border: 1px solid #000;console.log(typeof style) // string</script></body>
通过这种方式我们就可以获取到其内联样式，但是其返回值是一个字符串类型，导致其操作会比较麻烦
通过HTMLElement.style属性
由于DOM规范标准中将Document对象定位的HTML页面元素解析为相应的对象，而这些对象都继承于HTMLElement对象。
该对象提供了style属性，此属性返回一个CSSStyleDeclaration对象，表示元素的内联样式属性，但忽略任何样式表应用的属性。
示例代码如下：
<body><div id="d1"style="width: 200px;height: 200px;border: 1px solid #000;background: #666;"></div><script>var d1 = document.getElementById('d1')var style = d1.styleconsole.log(style)</script></body>
我们可以通过返回的这个对象，获取我们想要的具体内容，例如：
console.log(style.border) // 1px solid rgb(0, 0, 0)
CSSStyleDeclaration对象
通过HTMLElement.style属性返回的CSSStyleDeclaration对象，它是一个CSS声明块，表示CSS属性键值对的集合。用次对象操作CSS的样式属性是比较方便的。
下表中是CSSStyleDeclaration对象中一些比较常用的属性和方法
示例代码如下
<body><div id="d1"style="width: 200px;height: 200px;border: 1px solid #000;background: #666;"></div><script>var d1 = document.getElementById('d1')var style = d1.style// 获取CSS声明块的内容console.log(style.cssText) // width: 200px; height: 200px; border: 1px solid rgb(0, 0, 0); background: rgb(102, 102, 102);// 获取属性长度(不一定与设置的个数一致)console.log(style.length) // 29// 获取索引值为 20 的属性名console.log(style.item(20)) // background-position-x// 获取 background 的属性值console.log(style.getPropertyValue('background')) // rgb(102, 102, 102)</script></body>
值得注意的是，CSSStyleDeclaration.cssText属性返回的是文本内容，解析操作时会比较麻烦
当然了，也可以使用使用CSSStyleDeclaration.CSS属性名的方式直接获取到其属性值，示例代码如下：
console.log(style.background) // rgb(102, 102, 102)
设置内联样式
我们之前已经学习了怎么获取内联样式属性的两种方式，一个是通过Element对象getAttribute()方法，另一个是通过HTMLElement对象的style属性。如果想要设置内联样式对应的也是两种，一个Element对象setAttribute()方法，而另一个依旧是通过HTMLElement对象的style属性。
示例代码如下
<body><div id="d1"style="width: 200px;height: 200px;border: 1px solid #000;background: #666;"></div><script>var d1 = document.getElementById('d1')// 方法1.利用属性操作的方式// 修改宽度d1.setAttribute('style', 'width: 300px;height: 100px;border: 1px solid #000;background: #666;')// 方法2.利用HTMLElement对象的style属性var style = d1.style// 修改背景style.background = '#ddd'</script></body>
class属性的操作
在我们编写HTML页面的时候时，对页面的样式操作，主要是通过class选择器的，我们可以通过这种特质，来达到修改样式的操作。
Element对象提供的className属性，可以获取或设置指定元素的class属性的值。Element对象提供的getAttribute()和setAttribute()方法也可以获取或设置指定元素的class属性的值。
我们可以修改其值，来完成修改样式的操作，示例代码如下所示：
CSS 替换前后样式代码
/*替换前*/.cls {height: 200px;width: 200px;background-color: lightgreen;}/*替换后*/.one {height: 50px;width: 300px;background-color: lightsalmon;}
HTML代码如下
<body><div id="d1" class="cls"></div><script>var div = document.getElementById('d1')// 通过 Element 对象的 className 属性获取和设置var clsName = div.classNameconsole.log(clsName) // clsdiv.className = 'one'// 通过 Element 对象的 getAttribute() 和 setAttribute() 进行获取和设置var className = div.getAttribute('class')console.log(clsName) // clsdiv.setAttribute('class', 'one')</script></body>
使用这两种都可以进行样式切换，这种的主要区别是
Element.className属性仅是对class的值进行操作的，而Element对象的getAttribute()和setAttribute()方法是可以对任意属性和值进行操作的。
Element对象提供的classList属性，该属性返回一个元素的类属性的实时集合。示例代码如下
<body><div id="d1" class="cls two"></div><script>var div = document.getElementById('d1')// 通过 Element 对象的 classList 属性var classList = div.classListconsole.log(classList)</script></body>
现在我们可以通过DOMTokenList.value的方式进行页面样式的操作，示例代码如下
classList.value = 'one'
获取当前有效的样式
一个HTML页面的呈现，往往是通过多个CSS样式规则设置的，其中避免不了有许多的覆盖，但是这么多的样式规则中，我们怎么知道那些是有效的，那些是无效的呢，现在我们就来学习一下如何有效的获取当前有效的样式。
Window.getComputedStyle()方法
Window.getComputedStyle()方法返回一个CSSStyleDeclaration对象，该对象包含指定元素的当前有效样式。
语法结构如下所示：
var style = window.getComputedStyle(element, [pseudoElt]);
参数说明
element：用于获取计算样式的Element。pseudoElt(可选)：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。
返回值：一个实时的CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新本身。
示例代码如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>获取有效属性</title><style>.cls {height: 200px;background-color: rgb(255, 255, 0);}</style></head><body><div style="width: 200px; background-color: rgb(255, 0, 255);"class="cls"id="d1"></div><script>var div = document.getElementById('d1')var style = window.getComputedStyle(div)// 获取有效的 background-color 的值console.log(style.backgroundColor) // rgb(255, 0, 255)</script></body></html>
由于内联的尤其级别要高于内嵌的优先级别，所以返回的是内联的
background-color的值。
Window.getComputedStyle()方法是存在兼容性问题的，主要是指IE 8及以下版本的浏览器之中。
Element.currentStyle属性
由于Window.getComputedStyle()方法是存在兼容性问题，Element对象提供的currentStyle属性主要是应用于IE 8及以下版本的浏览器之中,功能与Window.getComputedStyle()方法相同。
示例代码如下
var div = document.getElementById('d1')function getStyle(element) {if (window.getComputedStyle) {return window.getComputedStyle(element)} else {return element.currentStyle}}var style = getStyle(div)// 获取有效的 background-color 的值console.log(style.backgroundColor) // rgb(255, 0, 255)
写在最后
你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。
最后也可以给我点个关注，万分荣庆。
往期推荐
【建议收藏】总结了42种前端常用布局方案关于v-model语法糖的知识点，这次应该说全了
