Javascript ドラッグアンドドロップシリーズ記事 1 - offsetParent 属性_javascript スキル無題のドキュメント無題のドキュメント無題のドキュメント無題のドキュメント-jsチュートリアル-php.cn

Javascript ドラッグアンドドロップシリーズ記事 1 - offsetParent 属性_javascript スキル無題のドキュメント無題のドキュメント無題のドキュメント無題のドキュメント

PHP中文网

リリース： 2016-05-16 19:00:52

オリジナル

1070 人が閲覧しました

このシリーズの記事では主に Javascript のドラッグアンドドロップ機能の実装に関する基本的な知識について説明し、最後に完全な例を示します。ドラッグアンドドロップについて何も知らない人に適しています。

まず、JavaScript の offsetParent 属性について説明します。
サポートされているブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
element.offsetParent
概要
offsetParent は、最も近い (包含内で最も近い) オブジェクトへの参照を返します。要素が位置決めされていない場合、要素の style.display が "none" に設定されている場合、offsetParent は null を返します。
構文
parentObj = element.offsetParent
パラメータ
・parentObj は、現在の要素がオフセットされている要素へのオブジェクト参照です。
仕様
DOM レベル 0 の一部ではありません。
Mozilla Developer Center Web サイトからの抜粋
次のように翻訳されます:
element.offsetParent
概要
offsetParent プロパティは、offsetParent を呼び出す要素に最も近いオブジェクトへの参照を返します。含まれる階層内で最も近い)、CSS で配置されたコンテナ要素です。このコンテナ要素が CSS で配置されていない場合、offsetParent 属性の値はルート要素 (標準互換モードの html 要素、奇妙なレンダリングモードの body 要素) への参照になります。コンテナ要素の style.display が「none」に設定されている場合 (IE と Opera を除く)、 offsetParent プロパティは null を返します。
構文
parentObj = element.offsetParent
変数
・parentObj は、現在の要素のオフセットが計算される要素への参照です。
仕様
DOM レベル 0。仕様の一部ではありません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<div id="parent"> 
<p id="sonObj">测试OffsetParent属性</p> 
</div> 
</body> 
</html>

ログイン後にコピー

テスト結果:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY"
結論:
要素もその親要素も CSS で配置されていない場合、値この要素の offsetParent 属性のがルート要素です。より正確には、この要素のさまざまなオフセット計算 (offsetTop、offsetLeft など) の参照は Body 要素です。 (実際には、標準互換モードでも変なモードでも、ルート要素は Body 要素です)
テストコード 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#parent{ 
position:absolute; 
<!--position：relative;--> 
left:25px; 
top:188px; 
border:1px solid black; 
} 
</style> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div> 
</body> 
</html>

ログイン後にコピー

テスト結果:
Firefox3: "p"
Internet Explorer 7: "p"
Opera 9.51: "p"
Chrome 0.2: "p"
Safari 3: "p"
結論:
親要素が要素には CSS が含まれています (絶対または相対) に配置されると、この要素の offsetParent 属性の値がその親要素になります。より正確には、この要素のさまざまなオフセット計算 (offsetTop、offsetLeft など) の参照はその親要素です。
テストコード 3:

[Ctrl A を押してすべて選択注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

テスト結果:
Firefox3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
結論要素もその親要素も (絶対または相対で) CSS で配置されていない場合、この要素の offsetParent 属性の値は、DOM 構造階層内でその要素に最も近く、CSS で配置されている要素になります。

テストコード 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#Grandfather{ 
position:relative; 
left:25px; 
top:188px; 
border:1px solid black; 
} 
</style> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<h1 id="Grandfather"> 
<div id="parent"> 
<p id="sonObj">测试OffsetParent属性</p> 
</div> 
</h1> 
</body> 
</html>

ログイン後にコピー

テスト結果:

Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: " BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY"
結論:
特定の要素のみが CSS で配置される場合、その親要素も DOM 構造レベルも配置されません。 CSS が配置され、この要素の offsetParent 属性の値は HTMLBODYElement です。より正確には、この要素のさまざまなオフセット計算 (offsetTop、offsetLeft など) の参照は Body 要素です。
offsetParent 属性については以上です。
次に何を書くかはまだ決めていません。