DOMPoint.y — Eigenschaft · JavaScript-Referenz

Signatur

DOMPoint.y

Beschreibung

Die Eigenschaft y eines DOMPoint gibt die vertikale Position eines Punktes im 2D- oder 3D-Koordinatensystem an. Bei Bildschirm- und DOM-Koordinaten wachsen positive Werte nach unten, negative Werte zeigen nach oben.

Anders als bei DOMPointReadOnly lässt sich y bei DOMPoint lesen und schreiben. Man kann einen Punkt also direkt verändern, etwa beim Ziehen eines Elements, in Animationsschleifen oder beim Nachrechnen von Transformationen mit DOMMatrix.

Der Wert ist eine Gleitkommazahl mit doppelter Genauigkeit (unrestricted double). Deshalb sind auch NaN und Infinity erlaubt. Der Standardwert ist 0, wenn im Konstruktor oder in DOMPoint.fromPoint() kein y angegeben wird.

Rückgabewert

Typ

number

Beschreibung

Die vertikale Koordinate des Punktes. Der Standardwert ist 0. Beim Zuweisen wird der Wert in eine Zahl umgewandelt.

Beispiele

Punkt erzeugen und y lesen/setzen

const punkt = new DOMPoint(10, 25);
console.log(punkt.y);

// y direkt ändern (DOMPoint ist veränderbar)
punkt.y += 15;
console.log(punkt.y);

// Standardwert, wenn y fehlt
console.log(new DOMPoint(5).y);

25 40 0

Mausposition als DOMPoint erfassen

const letzterKlick = new DOMPoint();

document.addEventListener('click', (event) => {
  letzterKlick.x = event.clientX;
  letzterKlick.y = event.clientY;
  console.log(`Klick bei y = ${letzterKlick.y}px`);
});

Klick bei y = 312px (je nach Klickposition)

y nach einer Matrix-Transformation

// Verschiebung um 50 px nach unten, danach Skalierung um den Faktor 2
const matrix = new DOMMatrix().translate(0, 50).scale(2);
const original = new DOMPoint(10, 20);

const transformiert = matrix.transformPoint(original);
console.log(original.y);      // unverändert
console.log(transformiert.y); // 20 * 2 + 50

20 90

Aus einem Objekt erzeugen mit fromPoint()

const daten = { x: 3, y: -7.5 };
const p = DOMPoint.fromPoint(daten);
console.log(p.y, typeof p.y);

-7.5 number

// Wichtig · Fallstricke

Richtung: In DOM- und Canvas-Koordinaten zeigt die y-Achse nach unten. Rechnet man mit mathematischen Koordinaten (y nach oben), muss man das Vorzeichen umkehren.
Keine Prüfung des Werts: Zuweisungen werden mit ToNumber umgewandelt. p.y = 'abc' ergibt NaN und wirft keinen Fehler.
Nur lesbar bei DOMPointReadOnly: Bei DOMPointReadOnly wird eine Zuweisung an y stillschweigend ignoriert. Im Strict Mode wirft sie einen TypeError.
DOMMatrix.transformPoint() und DOMPoint.matrixTransform() liefern einen neuen Punkt. Das y des ursprünglichen Punktes bleibt unverändert.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, auch in Web Workern. Ältere Browser wie der Internet Explorer kennen DOMPoint nicht. DOMPoint gehört nicht zum Kern von Node.js.

Siehe auch

DOMPoint DOMPoint.x DOMPoint.z DOMPoint.w DOMPointReadOnly CSSPositionValue.y