javascript - 如何获得 CSS 旋转元素的实际（非原始）高度

Question

我需要获得几个不同元素的实际高度（为了精确的自定义工具提示定位），并且其中一些元素（不是全部）被旋转。$(elem).outerHeight() 返回原始高度，而不是实际显示的高度。

这是一个非常简单的例子：http: //jsfiddle.net/NPC42/nhJHE/

我在这个答案中看到了一个可能的解决方案：https ://stackoverflow.com/a/8446228/253974 ，但我仍然希望有一个更简单的方法。

score 10 · Accepted Answer

掸去我高中几何和强大的图形技能，我把这张图放在一起。如果你有变量width, height, 和rotationjavascript，你可以这样表达高度：

var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation);

在此处输入图像描述

score 1 · Accepted Answer

如果您只打算使用 45 度的旋转并且宽度和高度始终相等，则可以使用相对简单的数学斜边公式计算实际旋转高度：

它表明斜边长度的平方等于其他两条边长度的平方和。

在这种情况下，最长的边将是从角到对角的对角线。这将大致转换为 jQuery，如下所示：

Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2))

请参阅更新的jsFiddle。

2 回答 2