封装getCss 方法

在封装动画库中用到了utils.getCss方法，这个方法是用来获取已经生效过后的样式。我们都知道获取已经生效的样式需要通过window.getComputedStyle这个方法来获取，而低版本的IE浏览器需要使用element.currentStyle来获取。我们封装一个getCss方法来处理兼容问题和其他一些细节问题

// @param ele 获取ele的样式
// @param attr 获取ele的attr样式  eg: getCss(body,'width')获取body的宽度
function
        getCss(ele,attr){
 var val = null;
 if(window.getComputedStyle){
 //window.getComputedStyle在标准浏览器里是一个函数，在低版本IE是对象的一个不存在的属性是undefined。所以可以利用这一点判断兼容问题

        val = window.getComputedStyle(ele,null)
 }else{ // 低版本IE浏览器
 if( attr == 'opacity'){
        // 获取透明度，但是在IE低版本中生效的透明度样式是filter滤镜，所以要做一个判断
 val = ele.currentStyle['filter']; // alpha(opacity=55.5) 我们只需要其中的55.5并且还需要除以100
 var reg = /^alpha\(
        opacity=(\d+(?:\.\d+)?)\)$/;
 val =
        reg.test(val) ? ret.exec(val)[1]/100 : 1; //如果验证可以通过那么就捕获alpha(opacity=50)类似这样的字符串中的50那个位置的分组.如果不能验证通过说明没有设置透明度样式，那么默认就是1

        }else{ //对于不是opacity的其他属性不用特殊处理
 val = ele.currentStyle[attr];

        }

 }
 var reg1 =
        /^-?\d+(\.\d+)(px|pt|em|rem|deg)?$/; //不是所有获取回来的返回值都需要去单位处理，比如block
 if(reg1.test(val)){
        val = parseFloat(val);
    }
    return val;
}

封装setCss方法

在动画库中用到了utils.setCss方法，这个方法是用来设置元素样式。其中有三个参数，ele,attr,val设置ele的attr样式值为val setCss(oDiv,’width’,100); 设置oDiv的宽度为100px

function setCss(ele,attr,val){
 if(attr == 'opacity'){ //设置透明度
 ele.style.opacity =
        val; //标准
 ele.style.filter = 'alpha(opacity='+val*100+')'; // ie6-8
 return;
 }
 if(attr == 'float'){ // 设置浮动
 ele.style.cssFloat =
        val
 ele.style.styleFloat = val;

        return;
 }
 var reg =
        /width|height|left|right|top|bottom|(margin|padding)(Left|Right|Top|Bottom)?/;
        //如果是设置这些属性中的一个
 if(reg.test(attr)){
        // 如果可以匹配，那么如果val没有单位主动添加单位
 if(!isNaN(val)){
 val = parseFloat(val);
 }
 }

        ele.style[attr] = val; //核心代码
}