Javascript 变换后的宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7565542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
width/height after transform
提问by jolt
How do I retrieve the width and height properties after I've applied transform: rotate(45deg);?
应用后如何检索宽度和高度属性transform: rotate(45deg);？
Like, 11x11 square after rotation becomes 17x17 (Chrome result), but javascript still returns original width/height - 10x10.
就像，旋转后的 11x11 正方形变为 17x17（Chrome 结果），但 javascript 仍然返回原始宽度/高度 - 10x10。
How do I get this 17x17?
我如何获得这个 17x17？
采纳答案by nonouco
Even if you rotate something the dimensions of it do not change, so you need a wrapper. Try wrapping your div with another div element and count the wrappers dimensions:
即使您旋转某些东西，它的尺寸也不会改变，因此您需要一个包装器。尝试用另一个 div 元素包装您的 div 并计算包装尺寸：
<style type="text/css">
#wrap {
border:1px solid green;
float:left;
}
#box {
-moz-transform:rotate(120deg);
border:1px solid red;
width:11px;
height:11px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
alert($('#box').width());
alert($('#wrap').width());
});
</script>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
Redited:the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:
编辑：包装器解决方案无法正常工作，因为包装器不会自动调整为内部 div 的内容。遵循数学解决方案：
var rotationAngle;
var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);
回答by alex
Instead of calculating it yourself, you can get this via the HTMLDOMElement's getBoundingClientRect().
您可以通过HTMLDOMElement's获得它，而不是自己计算它getBoundingClientRect()。
This will return an object with the correct heightand width, taking into account the transformation matrix.
考虑到变换矩阵，这将返回一个具有正确height和的对象width。
回答by abernier
I made a function for this, domvertices.js
我为此做了一个功能， domvertices.js
It computes the 4 vertices 3d coordinates of any, deep, transformed, positioned DOM element-- really just any element: see the DEMO.
它计算任何、deep、transformed、positioned DOM 元素的 4 个顶点 3d 坐标——实际上只是任何元素：参见DEMO。
a b
+--------------+
| |
| el |
| |
+--------------+
d c
var v = domvertices(el);
console.log(v);
{
a: {x: , y: , z: },
b: {x: , y: , z: },
c: {x: , y: , z: },
d: {x: , y: , z: }
}
With those vertices, you can compute anything among: width, height... Eg, in your case:
使用这些顶点，您可以计算以下任何内容：宽度、高度...例如，在您的情况下：
// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));
See the READMEfor more infos.
有关更多信息，请参阅自述文件。
--
——
It is published as a npm module (with no dep), so just install it with:
它作为 npm 模块发布（没有 dep），所以只需安装它：
npm install domvertices
Cheers.
干杯。
回答by jolt
In case you're looking for a function to programmatically calculate these values...
如果您正在寻找一个函数来以编程方式计算这些值...
// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el){
return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());
};
// get rotated dimensions
var transformedDimensions = function(el, angle){
var dimensions = getPositionData(el);
return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };
}
Here's a little something I put up. Probably not the best thing ever, but does the job for me.
这是我提出的一些东西。可能不是有史以来最好的事情，但对我有用。
回答by Charlie
I'm writing this answer since you have tagged JQuery.
我写这个答案是因为你已经标记了 JQuery。
Jquery takes in to consideration the transform factors when calculating dimensions.
Jquery 在计算维度时会考虑转换因子。
So, if you use
所以，如果你使用
$('mySelector').width()
it will give you the actual width. Same goes with height(), left()and top()
它会给你实际的宽度。与height(),left()和top()
