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

推薦する

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...

カスタム変数を使用した MySQL クエリの最適化

目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...

ミニマルなウェブサイトデザインの例

Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...

Linuxのファイル権限の詳細な紹介

Linux の優れた点は、マルチユーザー、マルチタスク システムにあります。 Linux では通常、...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

MySQL UNION演算子の基本知識ポイント

MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...

画像ボタンをフォームのリセットボタンとして使用する方法

フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

一般的なDockerコマンドの詳細な説明

1. ヘルプコマンド1. 現在のDockerバージョンを表示する docker バージョン2. イメ...

Linux環境で環境変数を設定する方法

JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Dockerfile を使用して Docker イメージをカスタマイズする方法

Dockerfile を使用したイメージのカスタマイズイメージのカスタマイズとは、実際には各レイヤー...