Javascript • Breite, Höhe, Position im ViewPort / Browserfenster

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

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.

Breite und Höhe 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.

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;

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

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

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