CSSNumericValue.equals() — Methode · JavaScript-Referenz

Signatur

CSSNumericValue.prototype.equals(...values)

Beschreibung

equals() gehört zum CSS Typed Object Model. Die Methode vergleicht einen numerischen CSS-Wert (z. B. CSS.px(10)) mit einem oder mehreren anderen Werten. Sie gibt nur dann true zurück, wenn alle übergebenen Werte dem aktuellen Wert streng gleich sind.

„Streng gleich“ heißt hier: Es werden Wert, Einheit und Aufbau verglichen, aber nicht umgerechnet. CSS.in(1) und CSS.px(96) stehen zwar für dieselbe Länge, gelten aber als ungleich. Bei zusammengesetzten Ausdrücken wie CSSMathSum, CSSMathProduct oder CSSMathMin müssen Typ, Anzahl und Reihenfolge der Operanden übereinstimmen.

Die Methode eignet sich gut, um Werte aus element.computedStyleMap() oder attributeStyleMap zu prüfen, ohne Zeichenketten zu vergleichen. Wenn Sie Werte unabhängig von der Einheit vergleichen wollen, rechnen Sie beide vorher mit to() in dieselbe Einheit um.

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	CSSNumericValue \| number		Ein oder mehrere Werte, mit denen verglichen wird. Einfache Zahlen werden intern in `CSSUnitValue` mit der Einheit `"number"` umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn jeder übergebene Wert dem aktuellen Wert exakt entspricht, sonst false.

Beispiele

Einfacher Vergleich von Einheitenwerten

const a = CSS.px(16);
const b = CSS.px(16);
const c = CSS.em(1);

console.log(a.equals(b));
console.log(a.equals(c));
// Zahlen werden als Einheit "number" behandelt
console.log(CSS.number(5).equals(5));

true false true

Keine automatische Umrechnung – vorher to() nutzen

const inch = CSS.in(1);
const px = CSS.px(96);

console.log(inch.equals(px));
// In dieselbe Einheit umrechnen und dann vergleichen
console.log(inch.to('px').equals(px));

false true

Mehrere Werte gleichzeitig prüfen

const base = CSS.rem(2);

console.log(base.equals(CSS.rem(2), CSS.rem(2)));
console.log(base.equals(CSS.rem(2), CSS.rem(3)));

true false

Berechneten Stil eines Elements prüfen

const box = document.querySelector('.box');
box.attributeStyleMap.set('padding-top', CSS.px(20));

const padding = box.computedStyleMap().get('padding-top');
if (padding.equals(CSS.px(20))) {
  console.log('Padding ist korrekt gesetzt');
}

// Math-Ausdrücke: Die Reihenfolge der Operanden zählt
const sum1 = new CSSMathSum(CSS.px(10), CSS.percent(5));
const sum2 = new CSSMathSum(CSS.percent(5), CSS.px(10));
console.log(sum1.equals(sum2));

Padding ist korrekt gesetzt false

// Wichtig · Fallstricke

Keine Einheitenumrechnung: CSS.cm(2.54).equals(CSS.in(1)) ergibt false. Rechnen Sie mit to() in eine gemeinsame Einheit um. Dabei können Gleitkomma-Rundungsfehler entstehen, deshalb ist bei umgerechneten Werten ein Vergleich mit Toleranz über .value oft verlässlicher.
Strukturvergleich bei Math-Werten: calc(10px + 5%) und calc(5% + 10px) gelten als ungleich, weil die Reihenfolge der Operanden abweicht.
Kein Ersatz für ===: Zwei verschiedene Objekte mit gleichem Inhalt sind mit === immer ungleich. Für einen inhaltlichen Vergleich ist equals() gedacht.
Browser-Kompatibilität: Die CSS Typed OM wird in Chromium-Browsern (ab Version 66) und in Safari (ab 16.4) unterstützt, in Firefox bisher nicht. Prüfen Sie die Unterstützung vorab, z. B. mit if (window.CSS && CSS.px).
Ohne Argumente gibt die Methode true zurück, da es keinen ungleichen Wert gibt.

Siehe auch

CSSFontFeatureValuesMap.has() CSSNumericValue.mul() CSSNumericValue.add() CSSNumericValue.max() CSSNumericValue.parse()