CSSPositionValue.y — Eigenschaft · JavaScript-Referenz

Signatur

CSSPositionValue.y

Beschreibung

Die Eigenschaft y gehört zum Interface CSSPositionValue aus einem frühen Entwurf des CSS Typed Object Model (Houdini). Ein CSSPositionValue steht für eine CSS-Positionsangabe, wie sie etwa bei object-position oder background-position verwendet wird. y enthält dabei den Abstand entlang der vertikalen Achse, gemessen von der oberen Kante.

Der Wert ist ein CSSNumericValue, meist ein CSSUnitValue wie CSS.px(20) oder CSS.percent(50). Man kann damit Positionen typisiert auslesen und verändern, ohne Zeichenketten wie "10px 20px" selbst zerlegen zu müssen.

Wichtig: CSSPositionValue wurde aus der Spezifikation gestrichen und war nur kurzzeitig hinter einem Flag in Chromium verfügbar. In aktuellen Browsern gibt es das Interface nicht. Positionswerte bekommt man heute als CSSStyleValue oder als Zeichenkette zurück. Für neuen Code solltest du deshalb auf element.attributeStyleMap mit CSSUnitValue-Werten oder auf klassisches element.style ausweichen.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Die vertikale Position als numerischer CSS-Wert, z. B. CSSUnitValue {value: 20, unit: "px"}. In der Entwurfsfassung war die Eigenschaft auch beschreibbar: Man konnte ihr einen neuen CSSNumericValue zuweisen.

Beispiele

Instanz erzeugen und y auslesen (mit Feature-Erkennung)

if (typeof CSSPositionValue === 'function' && typeof CSS.px === 'function') {
  const pos = new CSSPositionValue(CSS.px(10), CSS.px(20));
  console.log(pos.y.value, pos.y.unit);
} else {
  console.log('CSSPositionValue wird nicht unterstützt');
}

In aktuellen Browsern: CSSPositionValue wird nicht unterstützt (historisch in Chromium mit Flag: 20 px)

Vertikale Position verschieben

if (typeof CSSPositionValue === 'function') {
  const pos = new CSSPositionValue(CSS.percent(50), CSS.px(0));
  // y um 30px nach unten verschieben
  pos.y = pos.y.add(CSS.px(30));
  console.log(pos.y.toString());
} else {
  console.log('Nicht verfügbar – Fallback nutzen');
}

Nicht verfügbar – Fallback nutzen (historisch: 30px)

Moderner Ersatz: object-position über Typed OM bzw. style setzen

const img = document.querySelector('img');
const y = CSS.px ? CSS.px(20) : '20px';

if (img.attributeStyleMap) {
  // Positionswerte werden als Zeichenkette gesetzt
  img.attributeStyleMap.set('object-position', `50% ${y}`);
  console.log(img.attributeStyleMap.get('object-position').toString());
} else {
  img.style.objectPosition = `50% ${y}`;
  console.log(img.style.objectPosition);
}

50% 20px

// Wichtig · Fallstricke

Veraltet und entfernt: CSSPositionValue ist nicht mehr Teil der CSS-Typed-OM-Spezifikation. Kein aktueller Browser unterstützt das Interface, weder Chrome noch Firefox noch Safari. Prüfe vor jeder Nutzung mit typeof CSSPositionValue === 'function', ob es vorhanden ist.
attributeStyleMap.get('object-position') gibt heute einen allgemeinen CSSStyleValue zurück und keinen CSSPositionValue. Eine y-Eigenschaft gibt es darauf nicht.
y misst immer von der oberen Kante aus. Schlüsselwörter wie bottom 10px ließen sich in diesem Modell nicht direkt abbilden.
Wenn du einen Wert zuweist, der kein CSSNumericValue ist (zum Beispiel eine Zeichenkette), warf die Entwurfsimplementierung einen TypeError.

Siehe auch

CaretPosition.offset CSSPositionValue.x CSSMathMin.values CSSPositionTryRule.name CSSPositionTryRule.style