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 でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)
DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...
序文この記事では、docker-compose と dockerfile を使用して、binlog ...
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...
目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...
サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...
1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...
シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...
序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...
CSS の背景: background:#00ffee; //背景色を設定するbackground-...
目次1. サブクエリとは何ですか? 2. 自己結合3. 自然な結合4. 外部接続1. サブクエリとは...
この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...
<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...
目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...
以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...