设置或获取元素属性值的函数封装

注意：使用这个封装函数的时候，还要引入我之前封装的cssTransform函数，

链接：https://blog.csdn.net/lhjuejiang/article/details/80514094

使用介绍：分为取值和赋值，如果有val值，则为赋值，没有则为取值

调用：

获取元素相关属性的值：css(elem,attr);

设置元素相关属性的值：css(elem,attr,val)

参数说明：

elem:要进行动画的元素

attr:元素的属性

val:元素属性的值（不用带单位哦）

！注意：如果是对透明度或者transform中的scale进行设置的时候，因为我们处理的时候会除以100.所以如果是要设置元素的透明度为1，则设置的时候val为100，半透明的设置为50；同理如果想要对一个元素放大2倍，则val为200

css(obj,"scale",200);//元素放大为原来的2倍
css(obj,"opacity",100);//设置元素的透明度为不透明

//下面是css函数的封装
        function css(elem,attr,val){//如果是进行transform的相关操作，则调用cssTransform这个函数
            if(attr=="scale"||attr=="scaleX"||attr=="scaleY"||attr=="scaleZ"
                ||attr=="rotate"||attr=="rotateX"||attr=="rotateY"||attr=="rotateZ"
                ||attr=="skewX"||attr=="skewY"
                ||attr=="translateX"||attr=="translateY"||attr=="translateZ"
            ){
                return cssTransform(elem,attr,val);
            }
            if(arguments.length==2){//如果参数的个数为2个，说明是进行取值操作的
                var val = parseFloat(getStyle(elem,attr));//获取元素的属性值
                if(attr=="opacity"){//如果是获取透明度的，则要将这个值乘以100（处理小数精度的问题）
                    val = Math.round(val*100);
                }
                return parseFloat(val);
            }//下面是进行赋值操作的
            if(attr=="opacity"){//如果是设置透明度的，要将val值除以100
                elem.style.opacity = val/100;
                elem.style.filter = `alpha(opacity=${val/100})`
            }else{
                elem.style[attr] = val+'px';
            }
        }
    }

 function getStyle(elem,attr){//获取元素的属性值的兼容处理
            return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem, false)[attr];
        }

设置或获取元素属性值的函数封装

猜你喜欢