Javascript

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

本文主要是介绍浅谈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.cssFloatwindow.getComputedStyle(title).cssFloat

元素.style.样式名

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

仅仅能获取css内联样式

window.getComputedStyle(元素).样式名

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

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

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

 

这篇关于浅谈JS中的element.style和window.getComputedStyle()的区别的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!