獲取tranform參數函數的封裝
阿新 • • 發佈：2017-10-03
attr ota 但是 skew mst 思路 mstr 屬性 矩陣
平時我們都會去獲取元素的各種屬性值，例如寬高等等的值！但是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參數函數的封裝