Koordinatensysteme
Wenn die Position eines Pixels in einem Grafikkontext angegeben wird (ähnlich wie bei Koordinatensystemen in der Algebra), wird sie relativ zu einem festen Punkt im Kontext definiert. Dieser feste Punkt wird Ursprung genannt. Die Position wird durch den Abstand vom Ursprung in Pixeln entlang jeder Dimension des Kontexts angegeben.
Dieser Leitfaden beschreibt die Standardkoordinatensysteme des CSS-Objektmodells. Sie unterscheiden sich im Allgemeinen nur durch die Lage ihres Ursprungs.
Dimensionen
In den von Webtechnologien verwendeten Koordinatensystemen wird der horizontale Abstand als x-Koordinate bezeichnet. Ein negativer Wert gibt eine Position links vom Ursprung an, ein positiver Wert eine Position rechts davon. Die y-Koordinate gibt den vertikalen Abstand an: Ein negativer Wert liegt oberhalb des Ursprungs, ein positiver darunter.
Im Web liegt der Ursprung standardmäßig in der oberen linken Ecke des jeweiligen Kontexts (positive y-Koordinaten liegen unterhalb des Ursprungs). Dies unterscheidet sich von den meisten mathematischen Modellen, bei denen der Ursprung in der unteren linken Ecke liegt und positive y-Koordinaten oberhalb des Ursprungs liegen.
Wenn die dritte Dimension verwendet wird, um Objekte von vorne nach hinten anzuordnen, kommt die z-Achse zum Einsatz. Die z-Achse verläuft vom Betrachter zur Bildschirmoberfläche. Der Wert der CSS-Eigenschaft z-index beeinflusst, wo positionierte Elemente auf dieser Achse liegen. Dadurch entsteht der Eindruck, dass sie sich vom Betrachter entfernen oder sich ihm nähern.
Hinweis:
Die Definitionen und Ausrichtungen dieser Koordinatensysteme lassen sich mit CSS-Eigenschaften wie transform ändern. Im Folgenden geht es jedoch nur um die Standardkoordinatensysteme.
Standardkoordinatensysteme des CSSOM
Das CSS-Objektmodell verwendet vier Standardkoordinatensysteme. Zur Veranschaulichung der wichtigsten Systeme zeigt die folgende Abbildung einen Monitor mit einem Browserfenster, dessen Inhalt teilweise aus dem Viewport herausgescrollt wurde. Der aus dem Viewport herausgescrollte Seiteninhalt ist oberhalb des Browserfensters halbtransparent dargestellt. So wird sichtbar, wo der Ursprung der „page“-Koordinaten liegt. Die Ursprünge der Koordinatensysteme „client“, „page“ und „viewport“ sind hervorgehoben.
Offset
Bei Koordinaten nach dem „offset“-Modell liegt der Ursprung in der oberen linken Ecke des untersuchten Elements beziehungsweise des Elements, bei dem ein Ereignis aufgetreten ist.
Wenn beispielsweise ein Mausereignis auftritt, geben die Eigenschaften offsetX und offsetY des Ereignisses die Mausposition relativ zur oberen linken Ecke des Knotens an, an den das Ereignis übermittelt wurde. Der Ursprung ist bis zur padding edge eingerückt, also bis zur Kante zwischen dem Padding-Bereich und dem Rahmenbereich.
Viewport
Das „viewport“-Koordinatensystem (auch „client“-Koordinatensystem) verwendet die obere linke Ecke des Viewports oder des Browsing-Kontexts, in dem das Ereignis aufgetreten ist, als Ursprung. Der Viewport ist der gesamte Anzeigebereich, in dem das Dokument dargestellt wird.
Auf einem Desktopcomputer geben beispielsweise die Eigenschaften MouseEvent.clientX und MouseEvent.clientY die Position des Mauszeigers zum Zeitpunkt des Ereignisses relativ zur oberen linken Ecke des window an.
Bei Verwendung eines Eingabestifts oder eines Zeigers beziehen sich die Koordinaten Touch.clientX und Touch.clientY eines Touch-Ereignisses auf denselben Ursprung.
Die obere linke Ecke des Fensters hat immer die Koordinaten (0, 0), unabhängig vom Inhalt des Dokuments und davon, ob gescrollt wurde. Anders ausgedrückt: Wenn das Dokument gescrollt wird, ändern sich die Viewport-Koordinaten einer bestimmten Position innerhalb des Dokuments.
Page
Das „page“-Koordinatensystem gibt die Position eines Pixels relativ zur oberen linken Ecke des gesamten gerenderten Document an.
Das bedeutet, dass ein Punkt in einem Element des Dokuments nach horizontalem oder vertikalem Scrollen dieselben Koordinaten behält, sofern sich das Element nicht durch Layoutänderungen verschiebt.
Die Eigenschaften pageX und pageY eines Mausereignisses geben die Mausposition zum Zeitpunkt des Ereignisses relativ zur oberen linken Ecke des Dokuments an.
Die Koordinaten Touch.pageX und Touch.pageY eines Touch-Ereignisses beziehen sich auf denselben Ursprung.
Screen
Beim „screen“-Modell liegt der Ursprung schließlich in der oberen linken Ecke des Bildschirmbereichs des Benutzers. Jeder Punkt in diesem Koordinatensystem entspricht einem einzelnen logischen Pixel. Die Werte entlang jeder Achse nehmen daher in ganzzahligen Schritten zu oder ab. Die Position eines bestimmten Punkts innerhalb eines Dokuments ändert sich beispielsweise, wenn das zugehörige Fenster verschoben wird oder sich die Bildschirmkonfiguration des Benutzers ändert – etwa durch eine andere Bildschirmauflösung oder das Hinzufügen beziehungsweise Entfernen von Monitoren.
Die Eigenschaften MouseEvent.screenX und MouseEvent.screenY geben die Koordinaten der Position eines Mausereignisses relativ zum Bildschirmursprung an.
Die Koordinaten Touch.screenX und Touch.screenY eines Touch-Ereignisses beziehen sich auf denselben Ursprung.
Beispiel
Das folgende Beispiel protokolliert Mauskoordinaten innerhalb eines Elements. Immer wenn der Mauszeiger die innere Box betritt, sich darin bewegt oder sie verlässt, werden die Ereignisse verarbeitet und die aktuellen Mauskoordinaten in jedem der vier verfügbaren Systeme protokolliert.
HTML
Das HTML enthält ein <p>-Element mit der Klasse "log", das die Daten der Mausereignisse anzeigt.
<div class="outer">
<div class="inner">
<p class="log">Mouse over this section to view coordinates</p>
</div>
</div>
CSS
Die Klasse "outer" für die umgebende Box ist absichtlich sehr breit, damit sich die Auswirkungen des Scrollens auf die Mauskoordinaten beobachten lassen.
Im Absatz "inner" werden Mausereignisse erfasst und protokolliert.
.outer {
width: 1000px;
}
.inner {
font-family: monospace;
position: relative;
width: 500px;
height: 150px;
top: 25px;
left: 100px;
background-color: darkblue;
color: white;
cursor: crosshair;
user-select: none;
}
.log {
position: relative;
width: 100%;
text-align: center;
}
JavaScript
Der JavaScript-Code richtet die Event-Handler für die innere Box ein, indem er für jeden der Ereignistypen mouseenter, mousemove und mouseleave addEventListener() aufruft.
Bei jedem Ereignis wird die Funktion setCoords() aufgerufen. Sie setzt den Textinhalt des <p>-Elements auf die Koordinaten der einzelnen Systeme.
const log = document.querySelector(".log");
const inner = document.querySelector(".inner");
function setCoords(e) {
log.innerText = `
Offset X/Y: ${e.offsetX}, ${e.offsetY}
Viewport X/Y: ${e.clientX}, ${e.clientY}
Page X/Y: ${e.pageX}, ${e.pageY}
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);
Ergebnis
Hier sehen Sie das Ergebnis in Aktion. Bewegen Sie den Mauszeiger in die blaue Box und darin umher, und beobachten Sie, wie sich die X- und Y-Koordinaten der Maus in den verschiedenen Koordinatensystemen ändern.
Siehe auch
-
CSS-Transformationen verwenden: So verändern Sie ein Koordinatensystem
-
Koordinaten eines
MouseEvent: -
Koordinaten eines
Touch: