由于样式并没有设置在元素的 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
来源:知乎
著作权归作者所有,转载请联系作者获得授权。