javascript - 如何在转换之前获得元素的矩形？

Question

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

在下面的示例中，我希望输出为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>

score 3 · Accepted Answer

这已经是一个答案，您可以在这篇文章中阅读更多内容：如何检索 HTML 元素的实际宽度和高度？

因此，您可以通过将代码更改为以下内容来获得“之前”转换的实际值

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>

1 回答 1