オフセット属性は、オブジェクトへの参照を返します。 このコンテナ要素がCSSを配置しない場合、オフセットプロパティの値はルート要素です(HTML要素は標準互換性モードのHTML要素です。これは奇妙なプレゼンテーションモードのボディ要素です)。 コンテナ要素のstyle.displayが「none」に設定されている場合(ieおよびOperaを除く)、OfficeParentプロパティはnullを返します。
構文:
parentobj = element.offsetparent
変数:
darterOBJは要素への参照であり、現在の要素のオフセットが計算されます。
次のようにコードコードをコピーします。
<
<html>
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title>無題のドキュメント</title>
<script type = "text/javascript"言語= "javascript">
function offset_init(){
var pelement = document.getElementById( "sonobj");
parentobj = pelment.offsetparent;
Alert(derperobj.tagname);
}
</script>
</head>
<bodyのみ= "office_init()" >>
<div id = "parent">
<p id = "sonobj"> offsetParent属性をテスト</p>
</div>
</body>
</html>
テスト結果:
Firefox3:「ボディ」
インターネットexploorr 7:「ボディ」
オペラ9.51:「ボディ」
クロム0.2:「ボディ」
Safari 3: "ボディ
結論は:
要素とそのDOM構造レベルがDOM構造レベルで実行されない場合(絶対または電動)[または、DOM構造レベルが実行されないときに要素がDOM構造レベルで実行されないときに特定の要素が配置されます]、次にこの要素のオフセットプロパティ値の値はルート要素です。より正確には、この要素のさまざまなオフセット計算の参照(オフセット、オフセット左など)はボディ要素です。 (実際、時間標準互換モードや奇妙なモードに関係なく、ルート要素はボディ要素です)
テストコード2
次のようにコードコードをコピーします。
<
<html>
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title>無題のドキュメント</title>
<style type = "text/css">
#親 {
位置:絶対; - 位置:相対; - >
左:25px;
トップ:188px;
ボーダー:1pxソリッドブラック。
}
</style>
<script type = "text/javascript"言語= "javascript">
function offset_init(){
var pelement = document.getElementById( "sonobj");
parentobj = pelment.offsetparent;
Alert(derperobj.tagname);
}
</script>
</head>
<bodyのみ= "office_init()" >>
<div id = "parent"> divテストコード
<p id = "sonobj"> offsetParent属性をテスト</p>
</div>
</body>
</html>
テスト結果:
Firefox3:「div」
インターネットexploorr 7:「div」
オペラ9.51:「div」
クロム0.2:「div」
サファリ3:「div」
結論は:
特定の要素の親要素がCSSポジショニングを実行する場合、この要素のOfficeParentプロパティの値はその親要素です。より正確には、この要素のさまざまなオフセット計算の参照(officettop、offsetLeftなど)は親要素です
テストコード3
次のようにコードコードをコピーします。
<
<html>
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title>無題のドキュメント</title>
<style type = "text/css">
#祖父 {
位置:相対;
左:25px;
トップ:188px;
ボーダー:1pxソリッドブラック。
}
</style>
<script type = "text/javascript"言語= "javascript">
function offset_init(){
var pelement = document.getElementById( "sonobj");
parentobj = pelment.offsetparent;
Alert(derperobj.tagname);
}
</script>
</head>
<bodyのみ= "office_init()" >>
<h1 id = "grandfather">
<div id = "parent">
<p id = "sonobj"> offsetParent属性をテスト</p>
</div>
</h1>
</body>
</html>
テスト結果:
Firefox3: "H1"
インターネットexploorr 7: "H1"
オペラ9.51:「H1」
クロム0.2:「H1」
サファリ3:「H1」
結論は:
特定の要素とその親要素がCSSの位置付けでない場合、この要素のOfficeParentプロパティの値はDOM構造レベルで最も近く、CSSの位置が実行されています。