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

快来打我* 2022-05-23 03:52 260阅读 0赞

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

链接：[https://blog.csdn.net/lhjuejiang/article/details/80514094][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];
            }

[https_blog.csdn.net_lhjuejiang_article_details_80514094]: https://blog.csdn.net/lhjuejiang/article/details/80514094