0

全て

要素の位置について混乱しています。要素の左側のプロパティを取得/設定する方法から始めましょう。

まず、要素の左位置を設定する方法が 1 つあります。それには、element.style.left を使用します。http://www.w3schools.com/cssref/pr_pos_left.aspから以下に定義をコピーします。

  1. 絶対配置要素の場合、 left プロパティは、要素の左端を、要素を含む要素の左端の左/右の単位に設定します。
  2. 相対的に配置された要素の場合、 left プロパティは、要素の左端を通常の位置の左/右の単位に設定します。

私の質問は次のとおりです。

  1. 定義 1 で、包含要素は element.parentNode と等しいか?
  2. 定義 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 までの距離と等しくないことが明らかにわかります。

4

1 に答える 1