JavaScriptのDOM要素のサイズと位置_基礎知識-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptのDOM要素のサイズと位置_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:04 PM

dom 位置

1 要素の CSS サイズを取得します

1. style inline を通じて要素のサイズを取得します

コードをコピーコードは次のとおりです:

var box = document.getElementById('box') // 要素を取得します;

ボックス.スタイル.幅;
ボックス.スタイル.高さ;

// PS: style はインラインスタイル属性の CSS スタイルでのみ幅と高さを取得します。存在しない場合は空を返します。

2. 要素のサイズを計算によって取得します

コードをコピーしますコードは次のとおりです: var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;

style.width;

// PS: 要素のサイズを計算によって取得すると、インライン/インラインまたはリンクに関係なく、計算された結果が返されます。
// サイズが独自に設定されている場合は要素のサイズが返され、IE 以外の場合はデフォルトのサイズが返され、IE は auto を返します。


3. CSSStyleSheet オブジェクトの cssRules (または rules) 属性を通じて要素のサイズを取得します。

コードをコピーします
コードは次のとおりです:

var シート = document.styleSheets[0]; var rules = (sheet.cssRules || Sheet.rules)[0] // 最初のルールを取得します;; Rule.style.width; // 200px;
PS: cssRules はインラインスタイルとリンクスタイルの幅と高さのみを取得できますが、インラインスタイルと計算スタイルを取得することはできません。概要: 要素のサイズを取得する上記の 3 つの CSS メソッドは、要素の CSS サイズのみを取得できますが、パディング/スクロールバー/ボーダーの追加など、要素自体の実際のサイズを取得することはできません。

2 要素の実際のサイズを取得します

1.clientWidth と clientHeight

この一連の属性は、要素のコンテンツとパディングが占めるスペースを含む、要素の視覚領域のサイズを取得できます。 box.clientWidth; // 200;

PS: 要素のサイズが返されますが、デフォルトの単位は

です。 PS: 要素の実際のサイズに関して、clientWidth と clientHeight は次のように理解されます:
1. 要素に境界線を追加します。変更なし、200;
2. 要素に外枠を追加します。変更なし、200;
3. スクロールバーを追加します。最終値 = 元のサイズ - スクロールバーのサイズ
4. パディングを増やします。最終値 = 元のサイズのパディングサイズ
PS: CSS の幅と高さが設定されていない場合、IE 以外ではスクロールバーとパディングの計算されたサイズが含まれますが、IE では
が返されます。

2.scrollWidth とscrollHeight

この一連の属性は、スクロールバーなしで要素コンテンツの合計の高さを取得できます。 box.scrollWidth; // PS: 要素のサイズを返します。デフォルトの単位は px です。CSS の幅と高さが設定されていない場合は、計算された幅と高さが取得されます。

3.offsetWidth と offsetHeight

この属性セットは、ボーダー/パディング、スクロールバーを含む要素の実際のサイズを返すことができます。

ボックス.オフセット幅 200 PS: 要素のサイズが返されます。デフォルトの単位は px です。CSS の幅と高さが設定されていない場合は、計算された幅と高さが取得されます。 PS: 要素の実際のサイズについては、次のように理解します。 1. 境界線を追加します。最終値 = 元のサイズの境界線サイズ

2. パディングを増やします。最終値 = 元のサイズのパディングサイズ

3. 外部国境要塞を追加しました。変更はありません;
4. スクロールバーを増やします。変化も減少もありません。

PS: 要素のサイズを取得するには、一般に CSS サイズが設定されたブロックレベルの要素を使用する方が便利です。

3 要素の周囲のサイズを取得します

1.clientLeft と clientTop

// この属性セットは、要素によって設定された左枠と上枠のサイズを取得できます。 box.clientLeft; 2.offsetLeft と offsetTop (オフセット)

3.scrollTop とscrollLeft

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  box.offsetLeft;                  // 50;
  // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
  // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
  // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;

// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
  box.offsetTop+box.offsetParent.offsetTop;     // 只有两层的情况下;
  // 如果多层的话,就必须使用循环或递归;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一层距离;
    var parent = element.offsetParent;      // 得到第一个父元素;
    while(parent !== null){            // 判断如果还有上一层父元素;
      left += parent.offsetLeft;        // 将得到的距离累加;
      parent = parent.offsetParent;       // 将父元素也回溯;
    }                       // 然后循环;
    return left;                 // 得到最终距离;
  }

ログイン後にコピー

4 つの getBoundingClientRect() メソッド

// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
  box.scrollTop;                  // 获取滚动内容上方的位置;

// 设置滚动条滚动到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

ログイン後にコピー

5つのまとめ
1. オフセット寸法: 画面上の要素が占めるすべての表示スペースを含みます。要素の表示サイズは、パディング/スクロールバーと境界線を含む高さと幅によって決まります。 2. クライアントディメンション: 要素のコンテンツとそのパディングが占めるスペースを指します。 3.スクロールサイズ (スクロール寸法): スクロールするコンテンツを含む要素のサイズ。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7629

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

141

Related knowledge

Windows 11 で環境変数設定を有効にする方法の詳細 Dec 30, 2023 pm 06:07 PM

環境変数機能は、システム内で設定プログラムを実行するために不可欠なツールですが、最新の win11 システムでは、設定方法がわからないユーザーもまだ多くいます。 win11 環境変数の開き方. ぜひ参加して操作方法を学びましょう。 win11 環境変数はどこですか: 1. まず「win+R」と入力して、実行ボックスを開きます。 2. 次に、コマンド「controlsystem」を入力します。 3. 開いたシステム情報インターフェイスで、左側のメニューから「システムの詳細設定」を選択します。 4. 次に、開いた「システムのプロパティ」ウィンドウの下部にある「環境変数」オプションを選択します。 5. 最後に、開いた環境変数で、必要に応じて関連する設定を行うことができます。

Win11の起動パスとそれを開く方法 Jan 03, 2024 pm 11:13 PM

すべての Windows システムには起動パスがあり、そこにファイルやソフトウェアを追加すると、起動時にそのパスが開かれます。しかし、多くの友人は win11 の起動パスがどこにあるのか知りませんが、実際には、C ドライブ上の対応するフォルダーに入力するだけで済みます。 Win11 スタートアップパス: 1. ダブルクリックして「この PC」を開きます。 2. パス「C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup」をパスボックスに直接貼り付けます。 3. ここに win11 の起動パスがあり、起動後にファイルを開きたい場合は、そのファイルを置くことができます。 4. このパスに従って入力できない場合は、非表示になっている可能性があります。

Windows10資格情報マネージャーはどこにありますか Jul 09, 2023 am 10:09 AM

資格情報マネージャーは、Web 資格情報と Windows 資格情報を管理するためにユーザーが使用する機能ですが、多くのユーザーは Windows 10 資格情報マネージャーがどこにあるのかまだ知りません。実際、資格情報マネージャーは操作パネル上にあります。コントロールパネルを開いた後、資格情報マネージャーが表示されるように、表示方法を小さいアイコンに変更することを忘れないでください。すべての種類の情報を表示するには、[表示] をクリックします。大量のを表示するには、アカウントのパスワードを入力する必要があります。 Windows 10 資格情報マネージャーはどこにありますか: 1. システムでコントロールパネルを開き、右上隅にある [表示] メソッドをクリックして、種類を小さなアイコンに変換します。 2. 小さなアイコンとして表示されたら、「証明書マネージャー」をクリックします。 3. 資格情報マネージャーに入ると、主に次の目的で使用される関連機能の概要が表示されます。

スタードーム鉄道クロッカー映画テレビパークの折り紙鳥の場所 Mar 27, 2024 pm 11:51 PM

スタードーム鉄道のクローカー映画テレビパークには、合計 20 羽の折り紙の鳥がいます。多くのプレイヤーは、クロッカー映画テレビパークのどこに折り紙の鳥があるのか知りません。編集者は、誰もがわかるように、各折り紙の鳥の場所をまとめました。検索して、具体的な内容については、クローカー映画テレビ公園の折り紙の鳥の場所に関するこの最新のまとめをご覧ください。本海スタードーム鉄道のご案内：クルックムービーパーク1階2、クルックムービーパーク2階のオリガミバードスタードーム鉄道

pip インストールパッケージストレージの場所と構造を理解する Jan 18, 2024 am 08:23 AM

pip によってインストールされるパッケージの保存場所の詳細については、特定のコードサンプルが必要です。Pip は、Python 言語で一般的に使用されるパッケージ管理ツールです。Python パッケージのインストール、アップグレード、管理を簡単に行うために使用されます。 pip を使用してパッケージをインストールすると、対応するパッケージファイルが PyPI (Python Package Index) から自動的にダウンロードされ、指定された場所にインストールされます。では、pip によってインストールされたパッケージはどこに保存されるのでしょうか?これは、多くの Python 開発者が遭遇する問題です。この記事では、pip によってインストールされるパッケージの場所について詳しく説明し、次のことを提供します。

win11のシャットダウン場所 Jan 10, 2024 am 09:14 AM

コンピューターから長時間離れる場合は、コンピューターを保護するためにコンピューターをシャットダウンするのが最善です。では、win11 ではシャットダウンはどこにあるのでしょうか? 実際、一般的に言えば、スタートメニューを開くだけで次のことがわかります。その中にあるシャットダウンボタン。 Windows 11 をシャットダウンする場所: 回答: スタートメニューの電源ボタン内。 1. まず、下部のタスクバーにある「Windows ロゴ」をクリックして「スタートメニュー」を開きます。 2. 開いた後、図に示すように、右下隅に「電源」ボタンが見つかります。 3. 電源ボタンをクリックすると、「シャットダウン」が表示されるので、クリックしてシャットダウンします。 4. クラッシュなどの特別な状況によりコンピュータをシャットダウンできない場合は、コンピュータの「電源ボタン」を直接長押しして強制的にシャットダウンできます。

Apple のチェックイン機能の使用: iOS 17 のメッセージアプリのガイド Sep 14, 2023 pm 09:13 PM

Apple の iOS 17 では、メッセージに、安全に帰宅したことを愛する人に知らせる新機能が追加されました。これをチェックインと呼びますが、その使い方は次のとおりです。暗くなってから歩いて帰宅しているときでも、早朝にランニングに出かけているときでも、Apple のメッセージアプリで家族や友人にチェックインして、安全に帰宅したことを知らせることができます。到着すると、CheckIn が自動的に在宅時間を検出し、友人に通知します。通知を受けてチェックインが終了すると、あなたにも通知されます。何か予期せぬことが起こり、途中で遅れた場合でも、CheckTab はあなたが進んでいないことを認識し、ETA を延長するかどうかを尋ねてチェックインします。持っていない場合

Kuaishou はどこで公開されていますか?またその場所を変更するにはどうすればよいですか?アップロードされたビデオに位置情報を追加するにはどうすればよいですか? Mar 21, 2024 pm 06:00 PM

中国で有名なショートビデオプラットフォームとして、Kuaishou は多くのクリエイターに自分の才能を披露し、人生を共有する機会を提供します。動画をアップロードする際、初心者クリエイターの中には動画の投稿場所を変更する方法に戸惑う方もいるかもしれません。この記事では、Kuaishou ビデオの公開場所を変更する方法を紹介し、このプラットフォームを有効に活用して作品を紹介できるように、Kuaishou ビデオ公開に関するいくつかのヒントを共有します。 1. Kuaishou はどこで公開されていますか?またその場所を変更するにはどうすればよいですか? 1. 公開インターフェイス: Kuaishou APP で、[公開] ボタンをクリックしてビデオ公開インターフェイスに入ります。 2. 場所情報: 公開インターフェースに「場所」列があり、クリックして場所選択インターフェースに入ります。 3. 場所を変更する: 場所選択インターフェイスで、[場所] ボタンをクリックして現在の場所を表示します。場所を変更したい場合は「場所」をクリックしてください

See all articles