获取与设置transform值的封装函数——cssTransform(el,attr,val)

来源：互联网发布：网络十大恐怖歌曲编辑：程序博客网时间：2024/06/07 01:00
获取与设置transform值的封装函数——cssTransform(el,attr,val)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>获取与设置transform值的封装函数</title>        <!--            需要掌握的知识点：                1、用本函数获取transform值的前提是transform值首先是通过本函数设置的，                     不能是直接写在CSS中的transform值，因为css中直接获取的值为一个matrix矩阵。        -->        <style>            #box{                width: 300px;                height: 300px;                background: #000;                margin: 100px auto;            }        </style>        <script>            //el:需要获取或设置transform值的元素            //attr:获取或设置的transform的属性            //val:设置的transform的属性值            function cssTransform(el,attr,val){                if(!el.tranform){//判断只在无el.tranform属性时新创建el.tranform                    el.tranform={}//为元素el设置一个属性，为一个空对象                }                if(arguments.length>2){//判断是否有传入val，有则执行封装函数设置transform值的功能                    el.tranform[attr]=val;                    var sVal="";//用于储存多个transform值                    for( var attrs in el.tranform ){                        switch(attrs){                            case "rotate":                            case "rotateX":                            case "rotateY":                            case "rotateZ":                            case "rotate":                            case "skewX":                            case "skewY":                                sVal+=attrs+"("+el.tranform[attrs]+"deg) ";//注意此处的空格要加上                            break;                            case "translateX":                            case "translateY":                            case "translateZ":                                sVal+=attrs+"("+el.tranform[attrs]+"px) ";//注意单位的变化                            break;                            case "scale":                            case "scaleX":                            case "scaleY":                                sVal+=attrs+"("+el.tranform[attrs]+") ";//注意单位的变化                            break;                        }                    }                    el.style.webkitTransform=el.style.transform=sVal;                }else{//判断是否有传入val，无则执行封装函数获取transform值的功能                    var val=el.tranform[attr];//获取由该函数设置的transform值的元素的获取transform值                    if(typeof val == "undefined"){//如果想要获取默认值的话                        if(attr=="scale" || attr=="scaleX" || attr=="scaleY"){                            val=1;                        }else{                            val=0;                        }                    }                    return val;                }            }        </script>        <script>            window.onload=function(){                var box= document.querySelector("#box");                cssTransform(box,"translateX","200");                console.log(cssTransform(box,"translateX"));//200                console.log(cssTransform(box,"scale"));//1                console.log(cssTransform(box,"skew"));//0            }        </script>    </head>    <body>        <div id="box"></div>    </body></html>
1 0