設定或獲取元素屬性值的函式封裝
阿新 • • 發佈:2019-02-11
注意:使用這個封裝函式的時候,還要引入我之前封裝的cssTransform函式,
使用介紹:分為取值和賦值,如果有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];
}