获取tranform参数函数的封装

平时我们都会去获取元素的各种属性值，例如宽高等等的值！但是tranform是个让人很头疼的点，获取出来的是矩阵，耐何线性代数学的并不是那么6啊。

解决方法的思路：只能采取有点取巧的方法，在我们设置的时候把它记录一下，然后在通过这个函数去获取出之前设置的transform相关的值，再也不用去依靠浏览器来知晓。

不多说，上菜。

<style type="text/css">

#box {

    width: 100px;

    height: 100px;

    background: red;

}

</style>

<script type="text/javascript">

/* 设置和获取transform相关的值 */

/*

    attr:

        rotate

        rotateX

        rotateY

        rotateZ

        scale

        scaleX

        scaleY

        skewX

        skewY

        translateX

        translateY

        translateZ    

    必须通过它设置，才可以通过它获取

*/

function setTransform(el,attr,val){

    if(!el.transform){

        el.transform = {};

        //如果元素没有这个自定义属性我们就创建一下，格式是个对象

    }

    if(typeof val == "undefined"){//如果没传val参数，说明是取值操作，则返回之前设置的对应的attr的值

        return el.transform[attr];

    } else {

        el.transform[attr] = val;//记录的值先记住或者改正

        var value = "";

        for(var s in el.transform){

            //console.log(s,el.transform[s]);

            switch(s){

                case "rotate":

                case "rotateX":

                case "rotateY":

                case "rotateZ":

                case "skewX":

                case "skewY":

                    value += (s+"("+el.transform[s]+"deg) ");

                    break;

                case "translateX":

                case "translateY":

                case "translateZ":

                    value += (s+"("+el.transform[s]+"px) ");

                    break;

                case "scale":

                case "scaleX":

                case "scaleY":

                    value += (s+"("+el.transform[s]+") ");

                    break;

            }

        }

        el.style.WebkitTransform = value;

        el.style.MozTransform = value;

        el.style.msTransform = value;

        el.style.transform = value;

    }

}

window.onload = function(){

    var box = document.querySelector('#box');

    /*

        在设置的时候去记录transform相应的值

    */

    setTransform(box,"rotate",30);

    setTransform(box,"scale",.2);

    console.log(setTransform(box,"scale"));

};

</script>

</head>

<body>

<div id="box"></div>

</body>

有个这样的函数，操作起来简直是方便多啦！

巴特西

获取tranform参数函数的封装

最新文章

热门文章