HTML 要素のサイズを正確に決定するにはどうすればよいですか?

HTML 要素の実際の寸法を決定する

ブラウザのビューポート内で HTML 要素を位置合わせしようとする場合、その要素のサイズを正確に取得することが重要です。実際の幅と高さ。これには、さまざまなブラウザでサポートされている特定のプロパティと関数を活用する必要があります。

.offsetWidth および .offsetHeight

CSS 変換を考慮せずに要素の幅と高さを決定するには、次を使用します。 .offsetWidth プロパティと .offsetHeight プロパティ。これらのプロパティは、.style.

var width = document.getElementById('foo').offsetWidth;

getBoundingClientRect()

とは異なり、要素上で直接アクセスできます。.getBoundingClientRect() 関数は、 CSS 変換が適用された後の要素の寸法と位置。次の属性を示す浮動小数点数を返します:

console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Browser Support

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

以上がHTML 要素のサイズを正確に決定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。