zoukankan      html  css  js  c++  java
  • 【转】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
    来源:知乎
    著作权归作者所有,转载请联系作者获得授权。
  • 相关阅读:
    The Snail
    Oil Deposits
    杭电3784(继续xxx定律)
    poj 2395 Out of Hay
    poj 2485 Highways(简单题)
    poj 2560 || 杭电1162
    Rescue
    “中国芯”能抗衡英特尔吗?
    2013,中国计算巨头放眼国际市场
    123063天两度瘫痪:为啥不在淘宝上卖火车票?
  • 原文地址:https://www.cnblogs.com/Bideam/p/5810810.html
Copyright © 2011-2022 走看看