Window.getComputedStyle()
方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
let style = window.getComputedStyle(element, [pseudoElt]);
- element
- 用于获取计算样式的
Element
。 - pseudoElt 可选
- 指定一个要匹配的伪元素的字符串。必须对普通元素省略(或
null
)。
返回的
style
是一个实时的 CSSStyleDeclaration
对象,当元素的样式更改时,它会自动更新本身。getComputedStyle与style的区别
使用element.style
也可以获取元素的CSS样式声明对象,但是其与getComputedStyle
方法还有一些差异的。
- 只读与可写
正如上面提到的getComputedStyle
方法是只读的,只能获取样式,不能设置;而element.style
能读能写。 - 获取的对象范围
getComputedStyle
方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的属性显示出来);而element.style
只能获取元素style
属性中的CSS样式。因此对于一个元素<p>
,getComputedStyle
方法返回对象中length
属性值(如果有)就是100
,而element.style
就是0
。
① 获取元素精准高度
let style = obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj, null); let realheight = parseFloat(style.height));
② 获取伪类元素属性
let ele = document.getElementById("id");
window.getComputedStyle(ele, "before").content
本文链接地址: js 获取精准DOM尺寸&Css伪类操作