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

最新推荐文章于 2024-06-04 11:05:04 发布

信封中的阳光

最新推荐文章于 2024-06-04 11:05:04 发布

阅读量2.2k

点赞数 2

分类专栏：学习笔记——封装好的可用函数文章标签：函数

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/53088744

版权

学习笔记——封装好的可用函数专栏收录该内容

0 篇文章 0 订阅

订阅专栏

获取与设置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>