1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element.clientWidth コンテンツ + 内側の余白 - スクロールバー ----- 境界線と外側の余白を除く == 表示コンテンツ 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の他の関連記事もご覧ください。 以下もご興味があるかもしれません:
|
<<: CentOS 7 構成 Tomcat9+MySQL ソリューション
>>: Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)
目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...
たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...
目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...
Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...
Linux の優れた点は、マルチユーザー、マルチタスク システムにあります。 Linux では通常、...
目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...
MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...
フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...
1. ヘルプコマンド1. 現在のDockerバージョンを表示する docker バージョン2. イメ...
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....
Dockerfile を使用したイメージのカスタマイズイメージのカスタマイズとは、実際には各レイヤー...