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

298 阅读1分钟
  • 本次练习封装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;
    }