标签：style 浅谈 样式 getComputedStyle 获取 window testDiv
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
标签：style,浅谈,样式,getComputedStyle,获取,window,testDiv 来源： https://www.cnblogs.com/Lance-Blog/p/16663034.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。