如何在转换之前获取元素的矩形？

Question

目前，Element.getBoundingClientRect()给出了元素的位置和尺寸，但它会通过CSS transform属性自动解释转换。如何在没有转换的情况下获得矩形？

在下面的示例中，我希望输出为10 10 100 100。

const rect = div.getBoundingClientRect()
document.write(`${rect.left} ${rect.top} ${rect.width} ${rect.height}`)

body {
    margin: 10px;
}

div {
    background: red;
    width: 100px;
    height: 100px;
    transform: translate(1px, 1px) scale(0.5)
}

<div id="div"></div>

Answer 1

  

这里已经有了答案，您可以在这篇文章中阅读更多内容：   How do I retrieve an HTML element's actual width and height?

因此，您可以通过将代码更改为以下

来获取“转换前”的实际值

document.write(`${div.offsetLeft} ${div.offsetTop} ${div.offsetWidth} ${div.offsetHeight}`)

body {
    margin: 10px;
}

div {
    background: red;
    width: 100px;
    height: 100px;
    transform: translate(1px, 1px) scale(0.5)
}

<div id="div"></div>