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