nicht angemeldet
Position eines relativ positionierten Elements ermittel
StruppiGuten Morgen!
Ich nutze für meine Webseite ein Rahmenelement, das zentriert dargestellt wird. Darin sind dann alle Inhalte untergebracht. Der Abstand zum linken Rand des Browserfensters variiert also je nach Bildschirmbreite.
Wir kann ich mit Javascript herausfinden, wieviele Pixel vom linken Rand entfernt, das Rahmenelement beginnt?
-
Die Bildschirmbreite kannst Du mit document.documentElement.clientWidth (vor allem für IE) bzw. window.innerWidth (für alle anderen) feststellen.
Die Breite des Elements kann mit .offsetWidth ermittelt werden.
Die horizontale Position zum .offsetParent kann aus .offsetLeft ausgelesen werden. Achtung: der MSIE reagiert hier teilweise etwas unstandardmäßig und bietet zum Ausgleich ein Konstrukt namens getBoundingClientRect() mit der Struktur { left: x, top: y }.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine wunderbar. (...)-
Die Bildschirmbreite kannst Du mit document.documentElement.clientWidth (vor allem für IE) bzw. window.innerWidth (für alle anderen) feststellen.
Die Breite des Elements kann mit .offsetWidth ermittelt werden.
Die horizontale Position zum .offsetParent kann aus .offsetLeft ausgelesen werden. Achtung: der MSIE reagiert hier teilweise etwas unstandardmäßig und bietet zum Ausgleich ein Konstrukt namens getBoundingClientRect() mit der Struktur { left: x, top: y }.
Gruß, LX
Hallo Kollegen!
Vielen Dank für Eure Antworten. Ich habe einiges gelernt. Aber selbst als nicht unerfahrener Programmierer verliert man die Lust, bei diesem Durcheinander an Funktionen. Es ist eine wirkliche Qual, dass die Standards so unterschiedlich und fehlerhaft umgesetzt werden.
Jedenfalls habe ich das Projekt eingestampft und mich für eine andere Lösung entschieden. Es ging um die realisierung einer Navigationsleiste auf einer Webseite.-
Vielen Dank für Eure Antworten. Ich habe einiges gelernt. Aber selbst als nicht unerfahrener Programmierer verliert man die Lust, bei diesem Durcheinander an Funktionen. Es ist eine wirkliche Qual, dass die Standards so unterschiedlich und fehlerhaft umgesetzt werden.
.offsetLeft funktioniert in allen gängigen Browsern gleich ohne Probleme.
Struppi.
-
Es ist eine wirkliche Qual, dass die Standards so unterschiedlich und fehlerhaft umgesetzt werden.
Standards? Welche Standards? ;)
In dem Bereich ist eben gar nichts standardisiert. Alle besagten Techniken sind Erfindungen gewisser Browserhersteller (hauptsächlich Microsoft), die diese z.T. nicht einmal selbst gemäß ihrer eigenen Spezifikation korrekt umgesetzt haben (offsetTop im IE 5-7 z.B.). Andere Browser haben sie meistens reverse-engineered, also dem Verhalten des anderen Browsers so gut es geht nachgebildet.
Mathias
-
-
Die horizontale Position zum .offsetParent kann aus .offsetLeft ausgelesen werden. Achtung: der MSIE reagiert hier teilweise etwas unstandardmäßig ...
inwiefern eigentlich?
Ich arbeite gerade an einem Blogartikel über .offsetX, .clientX und .scrollX und verwende zu Demonstrationszwecken auch die Position und kann diesbezüglich kein Problem im IE finden, im gegensatz dazu scheinen ältere Mozilla Versionen fehlerträchtiger zu sein.
Struppi.
-
» Die horizontale Position zum .offsetParent kann aus .offsetLeft ausgelesen werden. Achtung: der MSIE reagiert hier teilweise etwas unstandardmäßig ...
inwiefern eigentlich?
Naja, ich hab ein bisschen gesucht. Bei offsetLeft reagiert kein IE nicht nach dem Standard. Aber laut der Tabelle die Mathias verlinkt hat bei offsetTop unter gewissen umständen. Wenn ein Elternelement des zu bestimmenden Elementes relativ positioniert ist. Wobei ich die Aussage mit einem IE 7 nicht nachvollziehen kann, es sei denn ich hab den Fehler falsch verstanden: hier mein Test.
Struppi.
-
Wobei ich die Aussage mit einem IE 7 nicht nachvollziehen kann, es sei denn ich hab den Fehler falsch verstanden: hier mein Test.
Try this:
<!DOCTYPE html> <html> <head> <script> [code lang=javascript]var oldOffsetParent, oldTarget; document.onmouseover = function (e) { e = e || window.event; var target = e.target || e.srcElement; if (oldOffsetParent) { oldOffsetParent.className = ""; } var offsetParent = target.offsetParent; offsetParent.className = "offsetParent"; oldOffsetParent = offsetParent; if (oldTarget) { oldTarget.className = ""; } target.className = "target"; oldTarget = target; document.getElementById("ausgabe").innerHTML = target.nodeName + (target.id ? "#" + target.id : "") + " to " + offsetParent.nodeName + (offsetParent.id ? "#" + offsetParent.id : "") + ": " + target.offsetTop; };</script>
<style>html { margin: 0; padding: 0; border: 0 none; } body { margin: 0; padding: 20px; } #rels { border: 1px solid black; padding-bottom: 40px; } #rels div { position: relative; top: 20px; left: 20px; padding-bottom: 40px; background-color: #edd; } #rels p { margin: 0; background-color: #ccd; line-height: 20px; } #rels .offsetParent { background-color: red; } #rels .target { background-color: blue; } #ausgabe { margin-top: 20px; }</style>
</head>
<body><div id="rels">
<div id="rel1">
<p>bla</p>
<div id="rel2">
<p>bla</p>
<div id="rel3">
<p>bla</p>
</div>
</div>
</div>
</div><div id="ausgabe"></div>
</body>
</html>[/code]Geh mal mit der Maus auf die p-Elemente. Da kommen Phantasiezahlen im IE < 8.
offsetTop für Element in einem Element position:relative wird falsch wiedergegeben. offsetParent verweist zwar auf das Element mit position:relative, aber offsetTop bezieht sich nicht auf dieses Element.
Die top- und left-Angaben sind übrigens nicht nötig, offsetTop ist auch ohne sie fehlerhaft.
Aber ich sehe gerade: Wenn die Element mit position:relative hasLayout haben (einfach mal zoom:1 für #rels div vergeben), wird offsetTop korrekt kalkuliert. LOL. Das bringt uns ja schonmal weiter und liefert:
http://lists.w3.org/Archives/Public/www-style/2008Apr/0468.html
http://annevankesteren.nl/2006/05/offsetMathias
-
-
-
-
Wir kann ich mit Javascript herausfinden, wieviele Pixel vom linken Rand entfernt, das Rahmenelement beginnt?
Mit .offsetLeft
Struppi.