问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何获取某个元素的transform属性？

头像
已注销
    60964559

    目的：动态获取元素transform中的rotateY属性
    问题：如图，

    clipboard.png

    试了ele.style.transform和$ele.css('transform')两种办法，第一种只能获取内联样式；用jQuery出来的是奇怪的matrix3d变换矩阵, 有没有办法用JS直接获取在<style>中设置的'transform'样式的值呢？

    javascriptcsshtml
    阅读 26.6k
    4 个回答
    得票最新
    头像
    慕少艾
      3.5k269

      这个好像无法直接获取，所以需要转换下。
      老外给出的办法。

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
#divTransform {
    margin: 30px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    /* Internet Explorer */
    -moz-transform: rotate(9deg);
    /* Firefox */
    -webkit-transform: rotate(9deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(9deg);
    /* Opera */
}
</style>

<body>
    <div id="divTransform">
    </div>
</body>
<script>
var el = document.getElementById("divTransform");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
    st.getPropertyValue("-moz-transform") ||
    st.getPropertyValue("-ms-transform") ||
    st.getPropertyValue("-o-transform") ||
    st.getPropertyValue("transform") ||
    "FAIL";

// With rotate(30deg)...
// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
console.log('Matrix: ' + tr);

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var scale = Math.sqrt(a * a + b * b);

console.log('Scale: ' + scale);

// arc sin, convert from radians to degrees, round
var sin = b / scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

console.log('Rotate: ' + angle + 'deg');
</script>

</html>
      头像
      PiLee
        1.5k1110
        头像
        FernAbby
          182

          用document.getElementById(‘element’).style.xxx可以获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到；
          用$('').css()获取的是最终渲染规则，transform最终产生的渲染规则是以矩阵maxrix(x,x,x,x,x)的形式保存。

          clipboard.png
          这是zepto的源代码，可以看一下$('').css()函数获取CSS属性的实现

          所以对于要操作transform样式，还是直接写在元素style属性上，用内联样式，然后document.getElementById(‘element’).style.xxx就可以获取到了

          头像
          安可
            41
            新手上路，请多包涵

            获得矩阵变换

            let transform = $(targetNode).css('transform')
// matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)
let transformMatrix = transform.slice(7, transform.length - 1).split(', ')
// ["6.12323e-17", "1", "-1", "6.12323e-17", "0", "0"]

            矩阵各个值

            matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            被 1 篇内容引用
            推荐问题
            宣传栏