js学习总结----设置元素的样式值setcss

Posted 2020-09-27

在JS给元素设置样式属性值，我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式

下面封装一个给当前元素的某一个样式属性设置值的方法（增加在行内样式上的）：setCss()

function setCss(curEle,attr,value){
            //在JS中设置float样式值也需要处理兼容
            if(attr==="float"){
                curEle["style"]["cssFloat"] = value;
                curEle["style"]["styleFloat"] = value;
                return;
            }
            //如果打算设置的是元素的透明度，我们需要设置两套样式来兼容所有的浏览器
            if(attr === "opacity"){
                curEle["style"]["opacity"] = value;
                curEle["style"]["filter"] = "alpha(opacity="+value*100+")";
                return;
            }
            var reg = null;
            //对于某些样式属性，如果传递进来的值没有加单位，我们需要把单位默认的补充上，这样的话，这个方法就会人性化一些
            reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
            if(reg.test(attr)){
                if(!isNaN(value)){//判断传递进来的值是否是一个有效数字，如果是有效数字的话，证明当前传递进来的值没有加单位，我们给补充单位
                    value += "px";
                }
            }
            curEle["style"][attr] = value;
        }