简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何获取某个元素的transform属性？
PHP中文网
PHP中文网 2017-04-11 10:56:47
0
3
405

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

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

PHP中文网
PHP中文网

认证0级讲师

모든 응답(3)
Peter_Zhu
Peter_Zhu2017-04-11 10:58:47 3층

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

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
#pTransform {
    margin: 30px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate p */
    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>
    <p id="pTransform">
    </p>
</body>
<script>
var el = document.getElementById("pTransform");
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>
좋다 +0
답글 추가
迷茫
迷茫2017-04-11 10:58:47 2층

可以参考下这个问题，应该会有帮助
https://segmentfault.com/q/1010000003068938

좋다 +0
답글 추가
PHPzhong
PHPzhong2017-04-11 10:58:47 1층

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


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

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

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！