全て
要素の位置について混乱しています。要素の左側のプロパティを取得/設定する方法から始めましょう。
まず、要素の左位置を設定する方法が 1 つあります。それには、element.style.left を使用します。http://www.w3schools.com/cssref/pr_pos_left.aspから以下に定義をコピーします。
- 絶対配置要素の場合、 left プロパティは、要素の左端を、要素を含む要素の左端の左/右の単位に設定します。
- 相対的に配置された要素の場合、 left プロパティは、要素の左端を通常の位置の左/右の単位に設定します。
私の質問は次のとおりです。
- 定義 1 で、包含要素は element.parentNode と等しいか?
- 定義 2 で、要素の通常の位置を取得するにはどうすればよいですか?
次に、element.offsetLeft を介して左の位置を取得できます。この方法を試してみると、どの要素がその要素の offsetParent であるかがわかります。また、以下のインターネットからグールした定義をコピーします。
- offsetParent プロパティは、最も近い位置にある (非静的) 祖先要素を参照します。そのような要素がない場合、offsetParent は body 要素を参照します。
そして、テスト Html ファイルを作成し、offsetParent を取得しようとします。
<div id="div_1">
<p id="p_1">
Lorum ipsum...
</p>
</div>
<div id="div_2" style="position: relative;">
<p id="p_2">
Lorum ipsum...
</p>
</div>
<table id="table_1">
<th>
<tr>
<td id="td_1">Cell</td>
<td>Cell</td>
</tr></th>
</table>
要素 p_1 の offsetParent は body であり、要素 p_2 の offsetParent は div_2 です。これまでのところ、すべて問題ありません。しかし、要素 td_1 の offsetParent を取得しようとすると、結果は本体ではなく table_1 になります。なんで？定義によると、最も近い位置にある (非静的) 祖先要素がないため、ドビーであるべきだと思います。
こんにちは、claustrofob、リプレイしていただきありがとうございます。td の offsetParent が table である理由について、私の質問の一部に答えていただけたと思います。しかし、style.left に関する別の回答に応じて、私は同意しません。私は新しいテストファイルを書きました. 以下はフラグメントです:
<div id="div_2" style="border:2px solid red; width: 500; height: 300;position: relative;">
<div id="div_3" style="border:2px solid blue;left:100px; width: 300; height: 100;">
<p id="p_2" style="position: relative;left: 30px">
Lorum ipsum...
</p>
</div>
</div>
<script>
var p_2 = document.getElementById('p_2');
document.write("<div>The position property of Element p_2 is "+ p_2.style.position +"</div>")
document.write("<div>The style.left of Element p_2 is "+ p_2.style.left +"</div>")
document.write("<div>The offsetParent of Element p_2 is "+ p_2.offsetParent.id +"</div>")
document.write("<div>The offsetLeft of Element p_2 is "+ p_2.offsetLeft +"</div>")
document.write("<br/>")
var div_3 = document.getElementById('div_3');
document.write("<div>The position property of Element div_3 is "+ (div_3.style.position ? div_3.style.position : 'not defined') +"</div>")
document.write("<div>The style.left of Element div_3 is "+ div_3.style.left +"</div>")
document.write("<div>The offsetParent of Element div_3 is "+ div_3.offsetParent.id +"</div>")
document.write("<div>The offsetLeft of Element div_3 is "+ div_3.offsetLeft +"</div>")
</script>
出力は次のとおりです。
要素 p_2 の位置プロパティは相対的です
要素 p_2 の style.left は 30px です
要素 p_2 の offsetParent は div_2 です
要素 p_2 の offsetLeft は 30 です
要素 div_3 の位置プロパティが定義されていません
要素 div_3 の style.left は 100px です
要素 div_3 の offsetParent は div_2 です
要素 div_3 の offsetLeft は 0 です
要素 div_3 に関する出力に注目すると、style.left が要素から element.offsetParent までの距離と等しくないことが明らかにわかります。