変換の前に要素の矩形を取得する方法は？

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>