Javascript 旋转后如何获得元件的真实宽度和高度？

我想知道当我使用

transform:rotate（）

并尝试使用

element获取旋转后的尺寸时，如何在旋转后获取元素的原始尺寸。getBoundingClientRect（）

它返回不同的宽度和高度，旋转一个元素后是否可能得到真实尺寸

let div1=document.getElementById（'one'））
设div2=document.getElementById（'two'）
//这里的宽度和高度分别为50和80
console.log（div1.getBoundingClientRect（））
//这里因为我使用了变换旋转，所以宽度是86，高度是94
console.log（div2.getBoundingClientRect（））

div#one{
宽度：50px；
高度：80px；
背景色：红色；
}
第二分区{
宽度：50px；
高度：80px；
背景色：红色；
变换：旋转（35度）；
}

一个选项是使用

cloneNode

克隆第二个div，然后删除

tranform

样式以获取其原始尺寸，请参见代码片段

let div1=document.getElementById（'one'）；
设div2=document.getElementById（'two'）；
//克隆旋转的div，然后删除变换样式
//这将给你它的原始尺寸
设div3=div2.cloneNode（false）；
div3.style.transform=“无”；
//隐藏克隆
div3.style.visibility=“隐藏”；
//附在身体上
文件.正文.附件（第3部分）；
log（div3.getBoundingClientRect（））；
//从DOM中删除克隆
div3.remove（）；
//这里的宽度和高度分别为50和80
log（div1.getBoundingClientRect（））；
//这里因为我使用了变换旋转，所以宽度是86，高度是94
log（div2.getBoundingClientRect（））
div#one{
宽度：50px；
高度：80px；
背景色：红色；
}
第二分区{
宽度：50px；
高度：80px；
背景色：红色；
变换：旋转（35度）；
}



您可以使用
offsetWidth
和
offsetHeight
。这可能比克隆和修改元素更有效


let div1=document.getElementById（'one'））
设div2=document.getElementById（'two'）
//这里的宽度和高度分别为50和80
console.log（div1.getBoundingClientRect（））
//这里因为我使用了变换旋转，所以宽度是86，高度是94
console.log（div2.getBoundingClientRect（））
console.log（第2部分offsetWidth）；
控制台日志（第2部分：远视）
div#one{
宽度：50px；
高度：80px；
背景色：红色；
}
第二分区{
宽度：50px；
高度：80px；
背景色：红色；
变换：旋转（35度）；
}



您只需在旋转之前保存元素的高度，并将其用作参考。
getComputedStyle（元素）[“高度”]
和
getComputedStyle（元素）[“宽度”]
是一个潜在选项。这是否回答了您的问题？出于某种原因，这给了我0的宽度和高度。谢谢，我在这里测试过，你的想法非常有效，我没有意识到。但是由于某些原因，您的代码不起作用。谢谢您的回答，它也起作用，但是使用
getBoundingClientRect
有时会更好，因为它在调整元素大小时返回真实维度，所以这就是为什么我不使用
offsetWidth
或
clientWidth
@Nisala的原因。我给了您一个向上的投票。我更新了我的答案，它似乎有效，但使用了更多的资源。我的意思是，如果在元素中使用
transform:scale（1.3）
，区别在于如果使用
getBoundingClientRect（）.width
它将返回真实的维度，但是如果使用
offset.width
它将返回维度，而不考虑
transform:scale（）
属性