小练习7：封装JS获取CSS样式的方法

最新推荐文章于 2022-09-23 16:40:24 发布

weixin_33997389

最新推荐文章于 2022-09-23 16:40:24 发布

阅读量195

点赞数

原文链接：https://juejin.im/post/5ba4ca71e51d450e46283908

版权

本次练习封装JS获取CSS样式的简单方法。

    //ele表示当前操作的元素 attr表示CSS属性
    function getCss(ele,attr) {
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else {
            return ele.currentStyle[attr];
        }
     //2.判断2 变量不存在时不可以直接用 但可以检测
//        if(typeof getComputedStyle === 'function'){
//            return window.getComputedStyle(ele,null)[attr];
//        }else {
//            return ele.currentStyle[attr];
//        }

        //3.检测浏览器的方式
        if(/msie [6-8]\.0/.test(navigator.userAgent)){
            return ele.currentStyle[attr];
        }else {
            return window.getComputedStyle(ele,null)[attr];
        }
    }
复制代码

经过上述代码的书写我们已经可以获取到CSS的样式，但我们需要将含有有效数+单位，把单位去掉，并转换成number类型，若不是，则原值返回。
新方法JS如下：

    function getCss(ele,attr) {
        var res = null;
        if (window.getComputedStyle) {
            res = window.getComputedStyle(ele, null)[attr];
        } else {
            res = ele.currentStyle[attr];
        }
        var reg = /^[+-]?(\d|[1-9]\d+)(\.\d+)?(px|em|pt)?$/;
        return reg.test(res) ? parseFloat(res) : res;
    }
复制代码

转载于:https://juejin.im/post/5ba4ca71e51d450e46283908