由于诸如ele.style.display这样的操作只能获取DOM元素的行内样式,所以获取结果可能与实际显示效果不符
通过getComputedStyle方法可以用来获取DOM元素实际显示时的样式,具体:
let style = window.getComputedStyle(element, [pseudoElt]);
getComputedStyle是window全局对象的一个方法,可以传递两个参数:
第一个参数指定一个用来获取计算样式的DOM元素,
第二个参数(可选)指定一个要匹配的伪元素的字符串,普通元素可省略或传null。
getComputedStyle方法执行会返回一个对象,该对象在包含指定DOM元素(或伪类)计算样式之后(实际显示)的所有CSS属性的值,并且会随着元素的样式更改自动更新,通过使用CSS属性名称进行索引可以获取该CSS属性值。
let element = document.getElementById('ele');
let style = window.getComputedStyle(element);//元素样式改变时会自动更新
let display = style.display;//元素指定样式属性的值
style.width; //元素的width值
注意:在Gecko2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)之前版本,参数pseudoElt是必要的。如果为null,则不指定其他主要浏览器必须指定此参数。Gecko已经更改为匹配其他浏览器的行为。
注: 因getComputedStyle()方法是只读的,故不能通过其去设置样式的属性值,设置样式的属性可通过style对象来解决。
原文:https://blog.csdn.net/qq_28387069/article/details/83118202