Signatur
Beschreibung
Die Eigenschaft y von DOMPointReadOnly gibt die vertikale Koordinate eines Punkts zurück. In der üblichen Bildschirm- bzw. CSS-Koordinatenkonvention wachsen positive Werte nach unten, also vom oberen Rand weg.
Die Eigenschaft kann nur gelesen werden. Zuweisungen haben keine Wirkung (im Strict Mode wird ein TypeError geworfen, weil es nur einen Getter gibt). Möchte man einen Punkt ändern, verwendet man stattdessen DOMPoint, dessen y beschreibbar ist, oder man erzeugt mit DOMPointReadOnly.fromPoint() einen neuen Punkt.
Typische Einsatzfälle sind geometrische Berechnungen mit DOMMatrix (z. B. matrix.transformPoint()), das Auswerten von Punkten aus WebXR oder Canvas-Transformationen sowie das Durchreichen unveränderlicher Koordinaten zwischen Modulen, ohne dass der Empfänger sie versehentlich ändern kann.
Rückgabewert
NaN, Infinity oder negativ sein). Standardwert ist 0, wenn beim Erzeugen nichts angegeben wurde.Beispiele
y-Koordinate eines Punkts auslesen
const punkt = new DOMPointReadOnly(120, 45, 0, 1);
console.log(punkt.y);
// Ohne Angabe ist y = 0
console.log(new DOMPointReadOnly(10).y);Punkt mit DOMMatrix transformieren
const start = DOMPointReadOnly.fromPoint({ x: 10, y: 20 });
// Verschiebung um 0/100 und Skalierung um Faktor 2
const matrix = new DOMMatrix().translate(0, 100).scale(2);
const ziel = matrix.transformPoint(start);
console.log(`y vorher: ${start.y}, nachher: ${ziel.y}`);Schreibschutz im Strict Mode
'use strict';
const p = new DOMPointReadOnly(0, 5);
try {
p.y = 99;
} catch (err) {
console.log(err.name, '– y bleibt', p.y);
}
// Veränderbare Kopie anlegen
const veraenderbar = DOMPoint.fromPoint(p);
veraenderbar.y = 99;
console.log(veraenderbar.y);Vertikalen Abstand zweier Punkte berechnen
const oben = new DOMPointReadOnly(50, 30);
const unten = new DOMPointReadOnly(50, 210);
const abstandY = Math.abs(unten.y - oben.y);
console.log(`Vertikaler Abstand: ${abstandY}px`);// Wichtig · Fallstricke
- Nur lesbar: Ohne Strict Mode werden Zuweisungen an
ystillschweigend ignoriert – ein häufiger, schwer zu findender Fehler. Für veränderbare PunkteDOMPointverwenden. - Richtung der Achse: Im CSS-/Canvas-Koordinatensystem zeigt die y-Achse nach unten, in WebGL/WebXR-Weltkoordinaten meist nach oben.
- Homogene Koordinaten: Bei perspektivischen Transformationen kann
wungleich 1 sein; die tatsächliche Bildschirmposition ergibt sich dann ausy / w. - Werte werden nicht geprüft:
NaNoderInfinitysind zulässig und werden bei Berechnungen weitergereicht. - Kompatibilität: In allen aktuellen Browsern verfügbar sowie in Web Workers. Sehr alte Browser (z. B. Internet Explorer) unterstützen
DOMPointReadOnlynicht. In Node.js nicht global vorhanden.