JS获取元素计算过后的样式

Posted 2020-09-10 Chris

获取元素计算过后的样式

Window.getComputedStyle()

方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值。

语法： let style = window.getComputedStyle(element, [pseudoElt]); 

element：用于获取计算养殖的element

pseudoElt：可选，指定一个更匹配的伪元素的字符串，必须对普通元素省略或null

返回值：是指指定元素或伪元素的所有属性的集合

如果没有伪元素，，伪元素这个参数是可以省略的，或者写null，但是为了兼容，null不要省略

浏览器兼容：

IE8不支持

需要使用currentStyle获取当前样式的任意属性值

element.currentStyle

在IE低版本可用。

 

兼容写法

  //兼容的获取当前样式的任意属性值
    function getStyle(element) {
        if(window.getComputedStyle){
            return window.getComputedStyle(element,null);
        }else {
            return element.currentStyle;
        }
    }
    //获取对应的属性的值
   function getStyle_2(element,attr) {
       if(window.getComputedStyle){
           return window.getComputedStyle(element,null)[attr];
       }else {
           return element.currentStyle[attr];
       }
   }