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伪类操作
