Wie get-und set-element-position in javascript

alle

Ich bin verwirrt über die position eines Elements. Lassen Sie mich beginnen, indem Sie wie zu get/set Links propety eines Elements.

Ersten, es gibt einen Weg, um das element nach Links, verwenden element.Stil.Links. Ich kopiere die definition von http://www.w3schools.com/cssref/pr_pos_left.asp unter:

1. Für absolut positionierte Elemente, die left-Eigenschaft legt den linken Rand ein element, um eine Einheit nach Links/rechts von der linken Kante seines - element enthalten.
2. Für relativ positionierte Elemente, die left-Eigenschaft legt den linken Rand ein element, um eine Einheit nach Links/rechts, um seine normale position.

also meine Fragen sind:

1. In definition 1 ist, enthaltenden element gleich ist dem element.parentNode?
2. In definition 2, wie bekomme ich das element der normalen position?

Zweiten, können wir die linke position durch element.offsetLeft. Wenn ich versuche auf diese Weise, ich sollte wissen, welches element das element ist offsetParent. Ich kopiere auch die definition, die ich von goole internet unter:

• Die offsetParent-Eigenschaft bezieht sich auf die nächste Position gebracht
  (nicht-statische) Vorfahren-element. Wenn es kein solches element,
  offsetParent beziehen sich auf das body-element

Und ich schreiben einen test-Html-Datei und versuchen Sie, die 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>

Die offsetParent-element p_1 ist Körper, und die offsetParent-element p_2 ist div_2, so weit, alles ist gut. Aber ich versuche mir das offsetParent von element td_1, das Ergebnis ist table_1, nicht Körper. Warum? Nach der definition, ich denke, dass es sein soll, doby, weil es keine nächste Position gebracht (nicht-statische) Vorfahren-element.

Hallo, claustrofob, vielen Dank für dein replay, ich denke, Sie beantwortet haben, Teile meiner Frage, warum die td ' s offsetParent ist Tabelle. Aber nach Ihr eine andere Antwort über Stil.Links, ich bin nicht einverstanden. Ich writed eine neue test-Datei, unten ist das fragment:

    <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>

Ausgabe:

Die position-Eigenschaft des Elements p_2 ist relativ

Stil.Links von Element p_2 ist 30px

Die offsetParent-Element p_2 ist div_2

Den offsetLeft von Element p_2 30

Die position-Eigenschaft des Elements div_3 ist nicht definiert

Stil.Links von Element div_3 ist 100px

Die offsetParent-Element div_3 ist div_2

Den offsetLeft von Element div_3 0

Wenn Sie konzentrieren sich auf die Ausgabe über element div_3, finden Sie natürlich den Stil.Links nicht gleich dem Abstand von element zu element.offsetParent.