Signatur
Beschreibung
Die Eigenschaft x der Schnittstelle DOMPointReadOnly gibt die horizontale Koordinate eines Punkts zurück. Der Wert ist eine unbeschränkte Gleitkommazahl (unrestricted double): Es sind also auch negative Werte, Dezimalzahlen, Infinity und NaN erlaubt. Die Standardeinstellung ist 0.
Da DOMPointReadOnly unveränderlich ist, ist x eine reine Lese-Eigenschaft. Sie wird beim Erzeugen über den Konstruktor new DOMPointReadOnly(x, y, z, w) oder über DOMPointReadOnly.fromPoint() festgelegt. Wer die Koordinate nachträglich ändern möchte, verwendet die abgeleitete Klasse DOMPoint, bei der x beschreibbar ist.
Praktisch begegnet man x vor allem bei Geometrie-Berechnungen: beim Transformieren von Punkten mit DOMMatrix (matrixTransform()), bei DOMQuad-Eckpunkten (z. B. p1.x), in der WebXR-API (XRRigidTransform.position) oder bei Canvas- und SVG-Koordinaten.
Rückgabewert
0).Beispiele
x-Koordinate eines Punkts auslesen
const punkt = new DOMPointReadOnly(120.5, 80, 0, 1);
console.log(punkt.x);
// Ohne Argumente ist x = 0
const ursprung = new DOMPointReadOnly();
console.log(ursprung.x);Schreibversuch wird ignoriert
'use strict';
const punkt = new DOMPointReadOnly(10, 20);
try {
punkt.x = 99; // Nur Getter vorhanden
} catch (err) {
console.log(err.name);
}
console.log(punkt.x);Punkt mit DOMMatrix transformieren
const punkt = new DOMPointReadOnly(50, 0);
// Verschiebung um 100 px und Rotation um 90°
const matrix = new DOMMatrix().translate(100, 0).rotate(90);
const ergebnis = punkt.matrixTransform(matrix);
console.log(Math.round(ergebnis.x), Math.round(ergebnis.y));Horizontalen Abstand zweier Eckpunkte eines DOMQuad berechnen
const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 200, height: 100 });
const breite = quad.p2.x - quad.p1.x;
console.log(`Breite: ${breite}px`);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
xwird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus ('use strict', ES-Module, Klassen) einenTypeErroraus. Für veränderliche PunkteDOMPointverwenden. - Keine Wertprüfung: Nicht-numerische Eingaben werden in Zahlen umgewandelt;
new DOMPointReadOnly('abc').xergibtNaN. Eingaben aus Formularen vorher validieren. - Transformationen erzeugen neue Objekte:
matrixTransform()verändert den ursprünglichen Punkt nicht, sondern gibt einen neuenDOMPointzurück. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 61+, Firefox 69+, Safari 10.1+) und steht auch in Web Workern zur Verfügung. In Node.js gibt es keine native Implementierung; dort sind Polyfills bzw. Bibliotheken wie
jsdomnötig. Der Internet Explorer wird nicht unterstützt.