js 动态获取元素transform中的属性

最新推荐文章于 2022-01-19 22:36:16 发布

ε=(´ο｀*)))

最新推荐文章于 2022-01-19 22:36:16 发布

阅读量1.6k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_35451480/article/details/103053772

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在某一元素上通过设置css-transform属性缩放。

直接获取是以下样式

如果想通过js获取scale值，则采用以下方法：

<!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>

参考：https://segmentfault.com/q/1010000005652477

ε=(´ο｀*)))

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 动态获取元素transform中的属性

在某一元素上通过设置css-transform属性缩放。直接获取是以下样式如果想通过js获取scale值，则采用以下方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&...
复制链接

扫一扫

专栏目录