如何获取和设置行内样式

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);
            }
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值