如何获取CSS旋转元素的实际（而不是原始）高度 [英] How to get actual (not original) height of a CSS-rotated element

问题描述

我需要获得几个不同元素的实际高度（为了精确定制工具提示定位），并且其中一些元素（不是全部）都被旋转。

I need to obtain actual height of several different elements (for the sake of precise custom tooltip positioning), and some of these elements (not all) are rotated. $(elem).outerHeight() returns the original height, instead of the actual displayed height.

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

Here's the fiddle with a very simple example: http://jsfiddle.net/NPC42/nhJHE/

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

I see a possible solution in this answer: http://stackoverflow.com/a/8446228/253974, but am still hoping there is a simpler way.

推荐答案

把我的高中几何和我强大的图形技巧打掉，我把这个图放在一起。如果您有变量 width ， height 和 rotation javascript，你可以这样表示高度：

Dusting off my high school geometry and my formidable graphics skills, I put this diagram together. If you have variables width, height, and rotation in javascript, you could express the height this way:

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

这篇关于如何获取CSS旋转元素的实际（而不是原始）高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！