JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプト

これらはすべて Element の属性であり、要素の幅を示します。

Element.clientWidth コンテンツ + 内側の余白 - スクロールバー ----- 境界線と外側の余白を除く == 表示コンテンツ
Element.scrollWidth コンテンツ + パディング + オーバーフローサイズ-----境界線と余白を除く == 実際のコンテンツ
Element.offsetWidth 要素の幅（コンテンツ + パディング + 境界線 + スクロールバー） == コントロール全体

2. 例

1. 水平スクロールバーのみ

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>scrollWidth、clientWidth、offsetWidth をテストする</title>
 <スタイル タイプ="text/css">
  本文、html {
   マージン: 0px;
   パディング: 0px;
  }

  ＃父親 {
   幅: 300ピクセル;
   オーバーフロー:自動;
   パディング: 10px;
   背景: レベッカパープル;
   境界線: 10px 実線の赤;
   マージン: 20px;
  }

  ＃子供 {
   高さ: 100px;
   幅: 1000ピクセル;
   パディング: 10px;
   境界線: 20px 実線 #ffcc99;
   マージン: 30px;
  }
 </スタイル>
</head>
<本文>

<div id="父">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var 子 = document.getElementById("子");
 console.log("child.width:", window.getComputedStyle(child).width); //コンテンツの幅: 1000px
 console.log("child.clientWidth:", child.clientWidth); //コンテンツ + 内側の余白 - スクロールバー-----境界線と外側の余白を除く == 表示コンテンツ 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //コンテンツ + パディング + オーバーフロー サイズ ----- 境界線と余白を除く == 実際のコンテンツ 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //要素の幅（コンテンツ + パディング + 境界線 + スクロールバー） == 全体、コントロール全体は 1060 ピクセルです

 var 父親 = document.getElementById("父親");
 console.log("father.width:", window.getComputedStyle(father).width); //コンテンツの幅: 300px
 console.log("father.clientWidth:", father.clientWidth); //コンテンツ + 内側の余白 - スクロールバー ----- 境界線と外側の余白は含まれません == 表示コンテンツ 320px
 console.log("father.scrollWidth:", father.scrollWidth); //コンテンツ + パディング + オーバーフロー サイズ ----- 境界線と余白を除く == 実際のコンテンツ 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //要素の幅（コンテンツ + パディング + 境界線 + スクロールバー） == 全体、コントロール全体は 340px です
</スクリプト>
</本文>
</html>

水平スクロールバーのみがある場合、親要素は子要素の幅の影響を受けます。もう 1 つの特別な要素は scrollWidth です。

親要素の scrollWidth は、子要素のコンテンツ + パディング + 境界線 + 子要素の片側のマージン + 親要素の片側のパディングです。

2. 水平スクロールバーと垂直スクロールバーがあります

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>scrollWidth、clientWidth、offsetWidth をテストする</title>
 <スタイル タイプ="text/css">
  本文、html {
   マージン: 0px;
   パディング: 0px;
  }

  ＃父親 {
   高さ: 50px;
   幅: 300ピクセル;
   オーバーフロー:自動;
   パディング: 10px;
   背景: レベッカパープル;
   境界線: 10px 実線の赤;
   マージン: 20px;
  }

  ＃子供 {
   高さ: 100px;
   幅: 1000ピクセル;
   パディング: 10px;
   境界線: 20px 実線 #ffcc99;
   マージン: 30px;
  }
 </スタイル>
</head>
<本文>

<div id="父">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var 子 = document.getElementById("子");
 console.log("child.width:", window.getComputedStyle(child).width); //コンテンツの幅: 1000px
 console.log("child.clientWidth:", child.clientWidth); //コンテンツ + 内側の余白 - スクロールバー-----境界線と外側の余白を除く == 表示コンテンツ 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //コンテンツ + パディング + オーバーフロー サイズ ----- 境界線と余白を除く == 実際のコンテンツ 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //要素の幅（コンテンツ + パディング + 境界線 + スクロールバー） == 全体、コントロール全体は 1060 ピクセルです

 var 父親 = document.getElementById("父親");
 console.log("father.width:", window.getComputedStyle(father).width); //コンテンツの幅: 285px
 console.log("father.clientWidth:", father.clientWidth); //コンテンツ + 内側の余白 - スクロールバー ----- 境界線と外側の余白は含まれません == 表示コンテンツ 305px
 console.log("father.scrollWidth:", father.scrollWidth); //コンテンツ + パディング + オーバーフロー サイズ ----- 境界線と余白を除く == 実際のコンテンツ 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //要素の幅（コンテンツ + パディング + 境界線 + スクロールバー） == 全体、コントロール全体は 340px です
</スクリプト>
</本文>
</html>

親要素の幅は、親要素のコンテンツの幅 - スクロールバーの幅（約15px）です。

親要素のクライアント幅は、親要素のコンテンツ幅 + 親要素のパディング幅 - スクロールバーの幅（約 15 ピクセル）です。

上記は、ElementにおけるclientWidth、offsetWidth、scrollWidthの違いの詳細内容です。clientWidth、offsetWidth、scrollWidthの違いについての詳細は、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません: