样式计算的几种方式与兼容写法：getComputedStyle&currentStyle&style

window.getComputedStyle（element,[string]）

1参为需要获取样式的元素，2参指定伪元素字符串（如“::after”，不需要则为null），设置2参可获取element的伪元素css样式
返回一个CSSStyleDeclaration对象，是所有css样式（内部、外部、内联）按层叠规则作用于该元素的最终结果样式
获得的样式只能读取不能设置
常用于FF，IE9+以下不支持此方法

element.currenStyle

返回一个CSSStyleDeclaration对象，是所有css样式（内部、外部、内联）按层叠规则作用于该元素的最终结果样式
只有IE和Opera支持使用
是属性不是方法

element.style:

只能操作内联样式，不能获取内部与外部样式
获取的样式属性可以进行设置

在JS工具类中封装自己的获取样式函数，兼容性写法：

export default class myUtils{
　　　　

    static getCompatibleStyle(elemOrSelect,pseudo){

        if(!elemOrSelect) return;

        if(elemOrSelect.constructor === String) elemOrSelect = document.querySelector(elemOrSelect);

        if(!pseudo) return getComputedStyle(elemOrSelect,pseudo);

        return elemOrSelect.currentStyle ? elemOrSelect.currentStyle : getComputedStyle(elemOrSelect,null);

    }

}

调用：

<script type="module">

        import utils from "./myUtils.js";

        console.log(utils.getCompatibleStyle("div",null).backgroundColor);

        console.log(utils.getCompatibleStyle("span","::after").display);

</script>

巴特西

样式计算的几种方式与兼容写法：getComputedStyle&currentStyle&style

window.getComputedStyle（element,[string]）

element.currenStyle

element.style:

在JS工具类中封装自己的获取样式函数，兼容性写法：

最新文章

热门文章