「offsetWidth」、「clientWidth」、「scrollWidth」（およびそれらの高さの対応部分）の違いは何ですか?

offsetWidth、clientWidth、scrollWidth、およびそれらの高さの対応部分について理解する

StackOverflow に関する多数の問い合わせやオンラインでの混乱または不正確な情報にもかかわらず、複雑さを理解するoffsetWidth、clientWidth、scrollWidth、およびそれらの高さの対応部分はそのままになります。

定義と視覚補助:

• offsetWidth, offsetHeight: 要素のビジュアル ボックスの幅と高さを表します。国境。幅/高さ、パディング、ボーダーを合計することで計算できます (display: block を持つ要素の場合)。
• clientWidth, clientHeight: 要素内のコンテンツの表示部分を示します。ボーダーとスクロールバー、ただしパディングも含みます。 CSS から直接派生することはできず、システムのスクロールバーのサイズに応じて異なります。
• scrollWidth、scrollHeight: スクロール領域の外側の非表示部分を含む、要素のコンテンツの合計サイズを示します。これもコンテンツに依存しており、CSS から直接計算することはできません。

[寸法がラベル付けされた CSS2 ボックス モデルのビジュアル]

スクロール バーの幅の計算:

offsetWidth にはスクロールバーの幅が含まれるため、次を使用して計算できます。式:

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

ただし、このメソッドは、offsetWidth と clientWidth の整数の性質により丸め誤差が生じる可能性があり、1 以外のズーム レベルでは実際の小数寸法を反映していない可能性があります。

追加の考慮事項:

次の点に注意してください。式:

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

は、Chrome では報告された幅からスクロールバーの幅を減算するため、信頼できる結果が得られません。さらに、Chrome は他のブラウザとは異なり、paddingBottom をスクロール コンテンツの下部にレンダリングします。

以上が「offsetWidth」、「clientWidth」、「scrollWidth」（およびそれらの高さの対応部分）の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。