1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親要素です(位置:絶対相対固定)。親要素に位置指定がない場合、offsetParentは: body要素 2. 定義によれば、次のような状況がある。
<!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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する
>>: Nginxは特定のページへのIPアクセスを制限します
目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...
目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....
<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...
機能別に並べ替えNN: このタグをサポートする Netscape の以前のバージョンを示しますIE:...
目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....
MySQL データベースでは、null は一般的な状況です。MySQL での null に関する注意...
目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...
フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...
目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...
目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3:解決策4: setTimeout...
プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...
この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...
序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...
目次レイアウト部分: <div id="アプリ"> <p>...