「offsetWidth」、「clientWidth」、「scrollWidth」とそれらの高さの違いは何ですか?

offsetWidth、clientWidth、scrollWidth、および -Height について

offsetWidth、clientWidth、scrollWidth、およびそれらの高さの対応部分の違いを理解するのは難しい場合があります。この記事の目的は、視覚的なヒントを添えてこれらのプロパティを包括的に説明し、これらのプロパティを使用してスクロール バーの幅を計算する方法を示すことです。

CSS ボックス モデルと DOM プロパティ

CSS Web ページ上の要素の寸法を定義するボックス モデルは、特にスクロール コンテンツを扱う場合には複雑になる可能性があります。 JavaScript を使用して要素の寸法を決定するプロセスを簡略化するために、各要素には 6 つの DOM プロパティがあります:

• offsetWidth、offsetHeight: すべての境界線と要素の幅/高さが含まれます。
• clientWidth, clientHeight: の表示部分を表します。枠線とスクロール バーを除き、パディングを含むボックスのコンテンツ。
• scrollWidth、scrollHeight: スクロール領域の外側に隠れている部分を含む、ボックスのコンテンツ全体のサイズを示します。

視覚的表現

[CSS2 ボックスのイメージ] Model]

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

スクロール バーの幅を組み込む offsetWidth プロパティを使用すると、次の式を使用してスクロール バーの幅を決定できます:

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

ただし、offsetWidth と clientWidth は常に整数であるのに対し、実際のサイズには小数点がある可能性があるため、丸め誤差が発生する可能性があります。

代替スクロール バーの幅の計算 (Chrome)

Chrome では、スクロール バーの幅は次の式を使用して計算できます。

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

ただし、この式はパディングとスクロール バーのレンダリング方法が異なるため、他のブラウザでは確実に動作しない可能性があります。

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