1. 程式人生 > >設定或獲取元素屬性值的函式封裝

設定或獲取元素屬性值的函式封裝

注意:使用這個封裝函式的時候,還要引入我之前封裝的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];
        }