获取元素尺寸，无论旋转

Question

假设我们有一个50x100 div，如果我们将它旋转45度，jquery会返回不同的宽度和高度值。如果我们再次旋转45度，jquery返回100表示​​宽度，50表示高度。

无论旋转如何，我都在寻找获得实际宽度和高度的方法。

注意：实际上我的元素的父元素有旋转，我不想参与它的旋转。我不愿意使用带有jquery宽度高度的sin / cos来获得原始尺寸。

Answer 1

由于jQuery是一个旧库，它使用了一些不同的组合（getBoundingClientRect，getComputedStyle，clientWidth/clientHeight和offsetWidth/offsetHeight（以及node.style））过了一段时间。

因此，如果不知道你使用过的jQuery版本，很难说它在内部的作用。

至少getBoundingClientRect为您提供转换元素的实际尺寸。

这是一个小测试用例：https://jsfiddle.net/bxe1ve9q

我敢打赌，使用clientWidth/clientHeight或offsetWidth/offsetHeight会为您提供正确的值。

附录：您可能不再使用jQuery（非常善于解决浏览器错误），您应该关注那些 hiccupillities™。以下是一些资源：

• http://caniuse.com
• http://www.quirksmode.org/dom
• http://www.webbrowsercompatibility.com

Answer 2

问题的解决方案是使用原生offsetHeight和offsetWidth。这是因为jQuerys width()和height()函数充其量只是挑剔。

<强>的jsfiddle
https://jsfiddle.net/4vxnmr4y/2/

小提琴在transitionEnd和每秒都检查框。 在Chrome，FF，IE11，IE Edge中测试过。试试吧！

它的要点基本上是这样的：

var box = $('#box');
var w = box[0].offsetWidth;
var h = box[0].offsetHeight;

但在小提琴中，我添加了大量代码，使其成为一个更加逼真的真实世界样本。