Koordinaten im Browserfenster
Auch CSS hantiert mit zwei Koordinatensystemen: position fixed und position absolute. Was mit position:absolute und top/left platziert ist, bleibt an seiner Position im Dokument und scrollt mit, wenn die Seite gescrollt wird. Was mit position: fixed positioniert ist, sitzt relativ zum Browserfenster und ist dort fest verankert.
Wenn die Seite nicht gescrollt wurde, sind die Koordinaten eines Elements im Dokument dieselben wie die Koordinaten des Browserfensters. Der Nullpunkt beider Koordinatensysteme ist gleich: top/left.
Größe des Dokument
Das HTML-Dokument ist i.d.R. größer als das Browserfenster – meist höher (dann entstehen die vertikalen Scrollleisten), u.U. aber auch breiter als das Browserfenster (dann entstehen auch horizontale Scrollleisten).
scrollHeight / scrollWidth vs innerHeight / innerWidth
Für viele Jahre war jQuery die zuverlässige Obermenge von Javascript. Ab IE 9 gibt Vanilla Javascript Werte wie die Höhe und Breite des Browserfensters (innerHeight / innerWidth) und des gerenderen Dokuments (scrollHeight / scrollWidth) ebenso zuverlässig zurück.
jQuery Vanilla Javascript $(window).scrollTop() window.pageYOffset $(window).scrollLeft() window.pageXOffset $(document).height() document.documentElement.scrollHeight $(document).width() document.documentElement.scrollwidth $(window).height() window.innerHeight $(window).width() window.innerWidth
Wenn wir ganz vorsichtig sein wollen:
let w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth||e.clientWidth||g.clientWidth, y = w.innerHeight||e.clientHeight||g.clientHeight;
Quelle: Github window-height-width.js
let body = document.body, html = document.documentElement; hbox.innerHTML = "body.scrollHeight " + body.scrollHeight + "body.offsetHeight " + body.offsetHeight + "html.clientHeight " + html.clientHeight + "html.scrollHeight " + html.scrollHeight + "html.offsetHeight " + html.offsetHeight;
Nur IE10 lieferte noch ein abweichendes Ergebnis bei offsetHeight – ab IE11 sind alle Browser auf derselben Linie.
Position eines Elements im Dokument
Javascript hat keine Standardmethode, um die Koordinaten eines Elements auszulesen – ist aber unproblematisch.
getBoundingClientRect gibt in allen modernen Browsern den Abstand zum Browserfenster oben links zurück. Nur noch die Höhe des gescrollten Bereichs dazu und fertig.
function getCoords(elem) { let box = elem.getBoundingClientRect(); return { top: box.top + pageYOffset, left: box.left + pageXOffset }; }
Höhe und Breite von Elementen
- offsetWidth und offsetHeight (ganzzahlig)
- liefern die Breite und die Höhe eines Elements inklusive padding und border (CSS border-box).
- clientWidth und clientHeight (ganzzahlig)
- sichtbarer Teil des Block-Inhalts ohne border, Scrollbar, aber mit padding.
- scrollWidth und scrollHeight
- Größe des Blocks mitsamt den nicht sichtbaren Teilen außerhalb des Scrollbereichs.
show.innerHTML = elem.offsetWidth; show.innerHTML = elem.offsetHeight; show.innerHTML = elem.clientHeight; show.innerHTML = elem.scrollHeight;
Wenn eine detaillierte Berechnung erforderlich ist – offsetWidth und clientWidth sind Integer oder ganzzahlig: element.getBoundingClientRect() gibt Höhe und Breite des Elements mit Nachkommastellen zurück.
Position des Mauszeigers
Die Position des Mauszeigers ist keine Eigenschaft des Javascript window-Objekts, sondern eine Eigenschaft des Events.
Das Javascript Event-Objekt bietet viele Eigenschaften für die Position des Cursors – zu beachten dabei, dass pageX / pageY relativ zum Document agieren, clientX / clientY relativ zum Browserfenster.
- pageX / pageY
- Horizontale/vertikale Position des Cursors von der oberen linken Ecke aus in Relation zum Dokument.
- x / y
- Äquivalent zu clientX, clientY
- clientX / clientY
- Horizontale/vertikale Position des Cursors von der oberen linken Ecke aus in Relation zum Browserfenster (aka Viewport).
Position des Cursors im Dokument
box.innerHTML = "clientX / clientY " + eve.clientX + " " + eve.clientY; box.innerHTML += "pageX / pageY " + eve.pageX + " " + eve.pageY; box.innerHTML += "x / y " + eve.x + " " + eve.y;