【转】JavaScript获得CSS3的tranform的值

由于样式并没有设置在元素的 style 属性上，所以一般要通过 getComputedStyle 才能获取。而这时就有一个和 transform 相关的问题了：不管你 CSS 中设的何种变换，计算值都会以 matrix(...) 的方式返回，要准确还原成你设置的值从理论上来说就是不可能的。

 

1 document.body.style.transform = 'scale(2)';
2 getComputedStyle(document.body).transform; // matrix(2, 0, 0, 2, 0, 0)

以下再提供一个野路子：通过 document.styleSheets 可以读取页面内的样式表，可以直接访问 CSSOM。

假设一个页面仅引入了这样的一段 CSS：

1 <style>
2 body {
3     transform: scale(2);
4 }
5 </style>

我们可以这样读取：

1 // 取第一个样式表的第一条规则
2 document.styleSheets[0].ownerNode.sheet.cssRules[0].style.transform; // scale(2)

当然，实际情况下，我们需要根据要查找的元素去匹配 selectorText，自行计算优先级，才能确定最后生效的规则是哪条。需要注意跨域的情况下是无法直接读取 cssRules 的，如果有跨域的样式存在，理论上这个方法就不可靠了。这时我们可以把我们算出来的值转成 matrix 去和通过 getComputedStyle 得到的值做比较，一致的话那我们取到的值还 可能是对的。为什么只是可能呢，因为可能跨域样式中写的 transform 值才是生效的，但表达式和我们找出来的在字面上不一样实际却是等价的。

作者：顾轶灵
链接：https://www.zhihu.com/question/30215867/answer/118884865
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

转载于:https://www.cnblogs.com/Bideam/p/5810810.html