CSS の OffsetWidth、clientWidth、scrollWidth、および Height

このチュートリアルのタイトルを読んだ後に頭に浮かぶ最初の疑問は、offsetWidth、clientWidth、scrollWidth は HTML の幅を返すということですが、これらの違いは何でしょうか?

これらの違いは、Web ページ上で占めるスペースの量です。このチュートリアルでは、HTML 要素のさまざまな幅とさまざまな高さについて学びます。

オフセット幅、クライアント幅、スクロール幅

• offsetWidth - 実際の幅、パディング、境界線、スクロールバーをピクセル単位で含む要素の合計幅です。幅には余白は含まれません。 HTML要素の外側の幅です。

• clientWidth - 要素のパディングの実際の幅を返します。これには、マージン、境界線、スクロールバーの幅は含まれません。 HTML要素の内部幅です。

• scrollWidth - パディングを含み、境界線、マージン、スクロールバーなどを除いた、スクロール可能なコンテンツの合計幅を返します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、JavaScript で offsetWidth、clientWidth、およびscrollWidth プロパティを使用できます。

リーリー

上記の構文では、要素は HTML 要素であり、その幅を見つける必要があります。

例 1

以下の例では、div 要素を作成し、テキスト コンテンツを追加しました。さらに、div 要素に固定幅を設定し、CSS を適用して水平方向にスクロールできるようにしました。

JavaScript では、div 要素にアクセスし、offsetWidth、clientWidth、scrollWidth プロパティを使用してそれぞれの幅を取得します。出力では、offsetWidth が 330 ピクセル (実際の幅 300 ピクセル、左パディング 10 ピクセル、右パディング 10 ピクセル、左境界線 5 ピクセル、右境界線 5 ピクセル) であることがわかります。 clientWidth は、境界線ではなく実際の幅とパディングのみをカウントするため、320 ピクセルに等しくなります。 scrollWidth は 1549 ピクセルで、スクロール可能なコンテンツの幅を測定します。

リーリー

例 2

以下の例では、最初の例と同様に、テキスト コンテンツを div 要素に追加し、水平方向にスクロールできるようにします。さらに、ユーザーの幅、パディング、境界線の幅を取得するための入力フィールドを作成しました。

JavaScript では、入力値にアクセスし、その値に基づいて HTML 要素のスタイルを設定します。

出力では、ユーザーは入力値を入力し、「幅を取得」ボタンをクリックして要素の幅を再計算できます。

リーリー

オフセットの高さ、クライアントの高さ、スクロールの高さ

offsetHeight、clientHeight、およびscrollHeightプロパティは、offsetWidth、clientWidth、およびscrollWidthと似ています。

• offsetHeight

  - 実際の高さ、パディング、境界線を含む要素の合計の高さを返します。要素の外側の高さです。

• clientHeight

  - 実際の高さとパディングの合計を返すだけです。これは内部の高さです。

• scrollHeight

  - パディングを含むスクロール可能なコンテンツの高さを返します。

  ＃＃＃文法＃＃＃
ユーザーは、次の構文に従って、offsetHeight、clientHeight、およびscrollHeight JavaScriptプロパティを使用できます。

リーリー

例 3

以下の例では、コンテンツを div 要素に追加し、Overflow-y をスクロールするように設定して、垂直方向にスクロールします。 JavaScript では、offsetHeight、clientHeight、scrollHeight プロパティを使用して、HTML 要素のさまざまな高さを取得します。

出力では、offsetHeight の高さは 130 ピクセルです。これは、実際の高さ 100 ピクセル、上部パディング 10 ピクセル、下部パディング 10 ピクセル、上部境界線 5 ピクセル、下部境界線 5 ピクセルに相当します。 clientheight は 120 ピクセルで、これは実際の幅とパディングの合計です。スクロールの高さは 343 ピクセルで、スクロール可能なコンテンツの高さと同じです。

リーリー

このチュートリアルでは、offsetWidth、clientWidth、scrollWidth プロパティを使用して HTML 要素の幅を取得する方法を学びました。さらに、HTML 要素の異なる高さを返す offsetHeight、clientHeight、scrollHeight プロパティの違いについても学習しました。

以上がCSS の OffsetWidth、clientWidth、scrollWidth、および Heightの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。