JavaScript offsetParent のケーススタディ

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親要素です(位置:絶対相対固定)。親要素に位置指定がない場合、offsetParentは: body要素

2. 定義によれば、次のような状況がある。

  1. 要素自体の配置が固定で、親要素の配置が固定でない場合、offsetParent の結果は null になります (Firefox では body、他のブラウザでは null)
  2. 要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentは<body>要素です。
  3. 要素自体には固定の位置はなく、親要素に位置があり、offsetParent は、配置された自身に最も近い親要素です。
  4. <body> 要素の offsetParent が null です
<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
</head>
 
<本文>
 <div id="test1" style="position:fixed"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<スクリプト>
    /*
    [1] 要素自体の位置が固定で、親要素の位置が固定でない場合、offsetParentの結果はnull(Firefoxではbody、他のブラウザではnull)になります。
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentが<body>要素である*/
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentが<body>要素である*/
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】<body>要素のoffsetParentがnullである
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</スクリプト>
</本文>
 
</html>

3. IE7では、positioningのoffsetParentに関して次のようなバグがあります。

[1] 要素自体が絶対位置または相対位置に配置され、親要素に位置指定された要素がない場合、IE7ブラウザではoffsetParentは<html>です。

<div id="test1" style="position:absolute;"></div>    
<スクリプト>
//IE7 ブラウザは <html> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>
<div id="test2" style="position:relative;"></div>    
<スクリプト>
//IE7 ブラウザは <html> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>
<div id="test3" style="position:fixed;"></div>    
<スクリプト>
//Firefox は固定位置の問題を考慮せず <body> を返しますが、他のブラウザは null を返します
コンソールにログ出力します。
</スクリプト>

【2】親要素にhaslayoutをトリガーする要素または配置された要素があり、offsetParentの結果が要素に最も近い親要素であり、配置されたかhaslayoutをトリガーする場合

<div id="div0" style="display:inline-block;">
    <div id='テスト'></div>    
</div>
<スクリプト>
//IE7 ブラウザは <div id="div0"> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>
<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='テスト'></div>    
    </div>    
</div>
<スクリプト>
//IE7 ブラウザは <div id="div1"> を返し、他のブラウザは <div id="div0"> を返します
コンソールにログ出力します。
</スクリプト>
<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='テスト'></div>    
    </div>    
</div>
<スクリプト>
//すべてのブラウザは <div id="div1"> を返します
コンソールにログ出力します。
</スクリプト>

JavaScript offsetParent ケースの詳細な説明については、これで終わりです。JavaScript offsetParent に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS OffsetParentプロパティの詳細な分析
  • jsのparentElementとoffsetParentの違い
  • Javascript ドラッグ シリーズ記事 1 offsetParent プロパティ

<<:  Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する

>>:  Nginxは特定のページへのIPアクセスを制限します

推薦する

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...

JavaScript配列の一般的なメソッドの概要

目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....

2008 年の Web デザインにおける 10 の経験

<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...

XHTML 1.0 リファレンス

機能別に並べ替えNN: このタグをサポートする Netscape の以前のバージョンを示しますIE:...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

MySQLデータベースのnullに関する知識ポイントのまとめ

MySQL データベースでは、null は一般的な状況です。MySQL での null に関する注意...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

HTMLページでチェックボックスを操作する方法

チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...

HTMLでのフォーム送信の実装

フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...

js を使用して XML オンライン エディターを作成する例

目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...

JS for ループで setTimeout を使用する 4 つのソリューション

目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3:解決策4: setTimeout...

Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...

MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...

Nginx ベースのアクセス制御と接続制限の実装

序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...

Vueは単純なランダムロールコールを実行します

目次レイアウト部分: <div id="アプリ"> <p>...