如何获取和设置行内样式

1、设置一个行内样式

 function setCss(curEle,attr,val) {
        // opacity 在IE8及以下是不兼容的；所以要设置filter属性；
        if(attr === "opacity"){
            curEle.style[attr] = val;
            curEle.style["filter"] = "alpha(opacity="+val*100+")";
            return;
        }
        //正则匹配width、height、fontSize、margin、padding...
        var  reg = /^width|height|fontSize|(margin|padding)?(top|left|bottom|right)?$/i;
        if(reg.test(attr)){
            if(typeof val==="number"){// 如果是number，需要拼接上“px”;
                val = val +"px";
            }
        }
        curEle.style[attr] =val;
    }

2、设置一组样式

 function setCss(curEle,attr,val) {
        // opacity 在IE8及以下是不兼容的；所以要设置filter属性；
        if(attr === "opacity"){
            curEle.style[attr] = val;
            curEle.style["filter"] = "alpha(opacity="+val*100+")";
            return;
        }
        //正则匹配width、height、fontSize、margin、padding...
        var  reg = /^width|height|fontSize|(margin|padding)?(top|left|bottom|right)?$/i;
        if(reg.test(attr)){
            if(typeof val==="number"){// 如果是number，需要拼接上“px”;
                val = val +"px";
            }
        }
        curEle.style[attr] =val;
    }
     // 设置一组样式；
    function setGroupCss(curEle,obj) {
        // 遍历所有的键值对；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }

对设置和获取样式属性进行简单的封装

 function setCss(curEle,attr,val) {
        // opacity 在IE8及以下是不兼容的；所以要设置filter属性；
        if(attr === "opacity"){
            curEle.style[attr] = val;
            curEle.style["filter"] = "alpha(opacity="+val*100+")";
            return;
        }
        //正则匹配width、height、fontSize、margin、padding...
        var  reg = /^width|height|fontSize|(margin|padding)?(top|left|bottom|right)?$/i;
        if(reg.test(attr)){
            if(typeof val==="number"){// 如果是number，需要拼接上“px”;
                val = val +"px";
            }
        }
        curEle.style[attr] =val;
    }
     // 设置一组样式；
    function setGroupCss(curEle,obj) {
        // 遍历所有的键值对；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }
    //
    function getCss(curEle,attr) {
        // 如果getComputedStyle在window中存在，那么用getComputedStyle；
        // 否则用currentStyle;
        var  val;
        if("getComputedStyle" in window){
            // 这是标准浏览器； IE9及以上
            val = getComputedStyle(curEle)[attr];
        }else{
            val = curEle.currentStyle[attr];
        }
        // 如果是非空字符串，才进行parseFloat;
        var  reg = /^width|height|fontSize|margin|padding|top|left|right|bottom$/;
        if(reg.test(attr)){
            // 正则匹配要处理去单位的属性
            if(!isNaN(parseFloat(val))){
                // 排除是空字符串的情况
                val = parseFloat(val);
            }else{
                return ""
            }
        }
        return val;
    };
    // 根据参数的个数和参数类型不同，调用不同的方法；
    function css(...argu) {// 把多余的参数放到一个数组中
        if(argu.length===3){
            setCss(...argu);// 展开运算符
        }else if(argu.length===2){
            if(toString.call(argu[1])==="[object Object]"){
                setGroupCss(...argu)
            }else{
                return getCss(...argu);
            }
        }
    }