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

HTML 要素の実際の寸法を計算する方法

HTML 要素を適切に配置するには、HTML 要素の正確な幅と高さを決定することが重要です。この記事では、実際の寸法を取得するためのさまざまな手法を検討し、さまざまなブラウザ間での互換性の詳細を提供します。

.offsetWidth および .offsetHeight

概念: これらのプロパティは、次の幅と高さを示します。パディングを含む要素とborder.

例:

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

ブラウザのサポート: すべての主要なブラウザ

.getBoundingClientRect()

コンセプト: このメソッドCSS 変換を適用した後の幅と高さを含む、さまざまな寸法と座標を含む DOMRect オブジェクトを返します。

例:

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,
}

ブラウザサポート:

• デスクトップ ブラウザ: Chrome、Edge、Firefox、Safari
• モバイル ブラウザ: Chrome for Android、iOS Safari

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