Javascript • Breite und Höhe von Browserfenster/Viewport, Dokument und Element

Koordinaten im ViewPort

Das Window-Objekt repräsentiert das Browserfenster: Position, Breite und Höhe des Dokuments im ViewPort, verfügbarer Platz und Position des Mauszeigers.

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 ViewPort. Der Nullpunkt beider Koordinatensysteme ist gleich: top/left.

Größe Viewports / Browserfensters

Sowohl für die Breite und Höhe des ViewPorts als auch für die Abmessungen des HTML-Dokuments oder eines Elements stehen Variationen von Werten bereit, mit und ohne Scrollbar, mit und ohne padding und border.

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

window.innerWidth

window.innerHeight

Für das Webdesign zählen Breite und Höhe des sichtbaren Dokuments oder von Elementen eher als Breite und Höhe des Browserfensters.

elem.clientWidth und elem.clientHeight – Platz im Dokument bzw. Element

document.documentElement.clientWidth gibt die Breite des sichtbaren Bereichs ohne Scrollleisten zurück. Einige Browser legen die Scrollleisten über den Inhalt der Seite, so dass die Werte dieselben wie bei window.innerWidth und window.innerHeight sind.

document.documentElement.clientWidth

Breite des sichtbaren Bereichs ohne Scrollleisten

document.documentElement.clientHeight

Höhe des sichtbaren Bereichs ohne Scrollleisten

Die Werte ändern sich, wenn das Browserfenster vergrößert oder verkleinert wird.

scrollWidth / scrollHeight

document.documentElement.scrollHeight / document.documentElement.scrollWidth gibt die gesamte Höhe /Breite des HTML-Dokuments zurück, unabhängig vom sichtbaren Bereich.

document.documentElement.scrollWidth

Breite des Dokuments

document.documentElement.scrollHeight

Höhe des Dokuments

Breite und Höhe des Viewports, des Dokuments und von Elementen

window.innerHeight und document.documentElement.clientHeight geben die Höhe des sichtbaren Bereichs der Seite (Viewport) zurück, aber sie unterscheiden sich in der Behandlung von Scrollbalken.

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.

Beispiel: Abmessungen iframe

Sowohl beim HTML-Dokument selber als auch bei Elementen im sichtbaren Bereich des Browserfensters – z.B. iframe-Elemente – lassen sich Breite und Höhe mit und ohne Überlauf abfragen.

iframe CSS:

body{
	background:ivory;
	padding: 20px;
	width: 600px;
	border: 20px solid green;
	margin-left: 0;
	margin-top: 0;
}
body::-webkit-scrollbar {
	width: 20px;
	background-color: gainsboro;
}

body::-webkit-scrollbar-thumb {
  background-color: cornflowerblue;
}

// Höhe des gesamten Inhalts des iframe ermitteln
document.querySelector("#scrollHeight").innerHTML = iframeDocument.documentElement.scrollHeight;
document.querySelector("#clientHeight").innerHTML = iframeDocument.documentElement.clientHeight;
document.querySelector("#offsetHeight").innerHTML = iframeDocument.documentElement.offsetHeight;

document.querySelector("#scrollWidth").innerHTML = iframeDocument.documentElement.scrollWidth;
document.querySelector("#clientWidth").innerHTML = iframeDocument.documentElement.clientWidth;
document.querySelector("#offsetWidth").innerHTML = iframeDocument.documentElement.offsetWidth;

getBoundingClientRect() – Koordinaten, Breite und Höhe von Elementen

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

Position / Koordinaten 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).

box.innerHTML = "clientX / clientY " + eve.clientX + " " + eve.clientY;
box.innerHTML += "pageX / pageY    " + eve.pageX + " " + eve.pageY;
box.innerHTML += "x / y            " + eve.x + " " + eve.y;