浅谈JS中的element.style和window.getComputedStyle()的区别

MDN对于element.style的解释

被高光的句子中的inline style属性是指css内联样式，即元素的style属性的属性值

总结一下，element.style只能获取到元素的style属性的属性值，并且可以更改，比如我们可以使用testDiv.style.backgroundColor = "blue"把testDiv的背景颜色改成蓝色

在我们使用testDiv.style.backgroundColor = "blue"后，testDiv所对应的元素的style属性的属性值会多出background-color: blue;

小编对于element.style的实验

<div id="testDiv" style="width: 100px;border: 1px solid #000"></div>

#testDiv {
    height: 200px;
    background-color: #000;
}

根据实验得知，element.style只能获取css内联样式，即style属性的属性值

接下来我们重置一下testDiv的背景颜色

当我们使用完testDiv.style.backgroundColor = "blue"后，发现testDiv的style属性的属性值中多了一条background-color: blue;

并且我们可以在控制台通过testDiv.style.backgoundColor获取testDiv的背景颜色

我们再在css中设置一下testDiv的background-color，如下图

我们再获取一下

很神奇啊，还是blue，这是为什么呢？

因为testDiv.style.backgoundColor只能获取testDiv的style属性里的背景颜色，而我设置的是非内联的css样式

菜鸟教程对于window.getComputedStyle()的解释

window.getComputedStyle()读取最终的样式，支持内联样式、嵌入样式和外部样式

但是window.getComputedStyle()是只读的，不能修改样式

注意：获取元素float值时，要用cssFloat（两者都是）

小编对于window.getComputedStyle()的实验

window.getComputedStyle()可以获取元素的所有样式

因此，建议获取的时候详细到我们想获取的样式，比如想获取字体的font-family，我们就可以用window.getComputedStyle(元素).fontFamily

我们在控制台更改一下halfTitle的color

原本的color值为rgb(255, 255, 255)

更改后

综上所述，window.getComputedStyle()获取的是实时的值

总结

不论是element.style还是window.getComputedStyle()，获取元素的float时，需要用cssFloat，比如title.style.cssFloat、window.getComputedStyle(title).cssFloat

元素.style.样式名

用于修改元素的样式，并且返回css内联样式

仅仅能获取css内联样式（行内样式）

window.getComputedStyle(元素).样式名

用于获取元素实时的值，不能修改

能把元素当时的所有样式全部问出来

建议获取的时候详细到我们想获取的样式，比如想获取字体的font-family，我们就可以用window.getComputedStyle(元素).fontFamily