获取tranform参数函数的封装
Posted 韩金金金
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取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参数函数的封装的主要内容，如果未能解决你的问题，请参考以下文章