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

注意:使用这个封装函数的时候,还要引入我之前封装的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];
        }


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值