2009-11-20 29 views
11

Ich habe ein Dutzend von Skripten gesehen, die die x- und y-Position eines Elements/Objekts innerhalb der Seite erfassen können. Aber ich habe immer Probleme mit dem Erfassen von x und y, wenn die Webseite Ränder am Körper verwendet, oder andere Elemente, absolute/relative Elemente wie diese.Position des Elements durch Javascript

Gibt es eine Lösung, die die genaue Position liefert, egal welche Ränder oder Polsterungen verwendet werden.

:)

Antwort

12

I-Code verwenden folgende div Feld bewegen Sie den Cursor in diesem Web IME site

function xy(x) { 
    o = document.getElementById(x); 
    var l =o.offsetLeft; var t = o.offsetTop; 
    while (o=o.offsetParent) 
     l += o.offsetLeft; 
    o = document.getElementById(x); 
    while (o=o.offsetParent) 
     t += o.offsetTop; 
    return [l,t]; 
} 

Seine folgen ein Array [links, oben],

+1

Hallo Markus, danke für deinen Code, aber wenn die Seite einen Rand am b hat ody, die position ist nicht mehr corrent, hast du eine lösung dafür? Vielen Dank im Voraus – Johnny

+1

Wie fügt man 'document.body.offsetLeft' und' document.body.offsetTop' zu den Rückgabewerten hinzu? – YOU

+2

Dies sollte unabhängig von Körperrändern funktionieren. Stellen Sie jedoch sicher, dass Sie einen Standardmodus-Doctyp verwenden. In Quirks sind alle Wetten deaktiviert. – bobince

10

die genaue Position zu erhalten ist einfach eine Sache, die offsetLefts und offsetTops rekursiv zu der offsetParents:

function getPos(ele){ 
    var x=0; 
    var y=0; 
    while(true){ 
     x += ele.offsetLeft; 
     y += ele.offsetTop; 
     if(ele.offsetParent === null){ 
      break; 
     } 
     ele = ele.offsetParent; 
    } 
    return [x, y]; 
} 
hinzuzufügen

Btw, würde diese Lösung wahrscheinlich zweimal schneller als the other solution above laufen, da wir nur einmal Schleife.

+0

@YOUs Code könnte drastisch vereinfacht werden, so dass sie in etwa gleich sind, wohingegen sein kürzer wäre . – Seiyria

0

Code YOU ist absolut schlecht, und ich habe einige Verbesserungen auf Pacerier der geben, so dass ich meine eigene Antwort schreiben:

function getPos(el, rel) 
{ 
    var x=0, y=0; 
    do { 
     x += el.offsetLeft; 
     y += el.offsetTop; 
     el = el.offsetParent; 
    } 
    while (el != rel) 
    return {x:x, y:y}; 
} 

Wenn nur als getPos(myElem) verwendet wird, wird die globale Position zurück. Wenn ein zweites Element als ein Argument enthalten ist (d. H. getPos(myElem, someAncestor)), das ein Vorfahre/Elternteil des ersten ist (zumindest irgendwo in der Kette), dann gibt es die Position relativ zu diesem Vorfahren. Wenn rel nicht angegeben ist (dh undefined links), dann gezielt verwendet es != statt !==, weil sie aufhören sollte, wenn el zu null bekommt und rel ist undefined als gut, so dass die nicht-strikte Gleichheit zweckmäßig ist, nicht ändern . Es gibt auch ein Objekt zurück, da dieses in der Verwendung etwas lesbarer ist als ein Array (und Sie können so etwas wie machen).

Dies ist abgeleitet von Pacerier Lösung, also wenn Sie upvote dies, in Betracht ziehen, upvoting seine auch.

1

offsetParent und andere Funktionen versetzt alt sind ... verwenden, um die getBoundingClientRect Funktion ... verwenden diese:

function getAbsPosition(element) { 
    var rect = element.getBoundingClientRect(); 
    return {x:rect.left,y:rect.top} 
} 

jetzt können Sie es wie dieser

<div style="margin:50px;padding:50px;" id="myEl">lol</div> 
<script type="text/javascript"> 
    var coords = getAbsPosition(document.getElementById('myEl')); 
    alert(coords.x);alert(coords.y); 
</script> 

keine Sorgen können Sie ... Egal wie viel Rand oder Position oder Padding das Element hat, es funktioniert immer

Verwandte Themen