84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
p{
width: 100px;height: 100px; transform-origin: 0 0; transform: rotateZ(45deg);
}这个p旋转了45度之后,怎么去获取它的宽与高?就是它旋转之后所占的空间
认证0级讲师
var test = document.querySelector('#test'); var rect = test.getBoundingClientRect(); alert('width:' + rect.width + 'height:' + rect.height);
试过很多种办法,只有这种办法有效了,我也长见识了
//获得视觉上的宽, 高... 原答案直接用了长宽一样的模型, 导致结果出错了 //1.获得原始宽, 高 var el = document.getElementById('box'), h = el.offsetHeight, w = el.offsetWidth; //2.获得旋转角度 //matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) var transform = window.getComputedStyle(el)['transform'], rotate = transform.slice(7, -1).split(','); //3.计算宽度, 高度 var lastH = h * rotate[0] + w * rotate[1], //h * sinθ + w * cosθ lastW = h * rotate[1] + w * rotate[0]; //h * cosθ + w * sinθ
旋转后不影响宽高吧
个人见解,不一定对。
之前怎么获取,还怎么获取。只是这时候宽高跟以往的宽高看起来有了点不一样
transform只是元素内部“看起来”发生了转变,但是元素本身还是一个长方形,永远是长方形。元素所占的空间会变成旋转后的宽高,不知你说的是否是这个空间呢?
https://jsfiddle.net/qichengzx/zkuucyvj/
试过很多种办法,只有这种办法有效了,我也长见识了
旋转后不影响宽高吧
个人见解,不一定对。
之前怎么获取,还怎么获取。只是这时候宽高跟以往的宽高看起来有了点不一样
transform只是元素内部“看起来”发生了转变,但是元素本身还是一个长方形,永远是长方形。元素所占的空间会变成旋转后的宽高,不知你说的是否是这个空间呢?
https://jsfiddle.net/qichengzx/zkuucyvj/