3

現在、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>

4

1 に答える 1

3

ここにすでに回答があります。この投稿で詳細を読むことができます: 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>

于 2017-01-03T02:41:05.507 に答える