js 获取精准DOM尺寸&Css伪类操作

Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

let style = window.getComputedStyle(element, [pseudoElt]);
element
 用于获取计算样式的Element
pseudoElt 可选
指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。
返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。

getComputedStyle与style的区别

使用element.style也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还有一些差异的。

  1. 只读与可写
    正如上面提到的getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写。
  2. 获取的对象范围
    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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注