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

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の他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • JavaScript の offsetWidth、clientWidth、innerWidth および関連する属性メソッド
  • scrollWidth、clientWidth、offsetWidthの違い
  • javascript scrollLeft、scrollWidth、clientWidth、offsetWidth の完全な説明
  • scrollWidth、clientWidth、offsetWidthの違い
  • HTML: scrollLeft、scrollWidth、clientWidth、offsetWidth の完全な説明
  • this.clientWidthとthis.offsetWidthの違いは何ですか
  • ClientWidthに関する情報

<<:  CentOS 7 構成 Tomcat9+MySQL ソリューション

>>:  Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)

推薦する

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

MYSQLでプロシージャの名前を変更する方法の詳細な説明

最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...

読み取り専用と無効の違い

要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...

Vueプラグインの実装で発生した問題の概要

目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...

MySQL の最適化: サブクエリの代わりに結合を使用する

サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

n 個のコンテナ要素による無限スクロールの実装コード

シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

mysql サブクエリと結合テーブルの詳細

目次1. サブクエリとは何ですか? 2. 自己結合3. 自然な結合4. 外部接続1. サブクエリとは...

MySQL 5.7.15 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...

デザイン理論:人間中心のデザインコンセプト

<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...

mySQLキーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...