CSSMathSum

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das CSSMathSum-Interface der CSS Typed Object Model API repräsentiert das Ergebnis, das durch Aufrufen von add(), sub() oder toSum() auf CSSNumericValue erhalten wird.

Ein CSSMathSum ist der Objekttyp, der zurückgegeben wird, wenn die Methode StylePropertyMapReadOnly.get() auf einer CSS-Eigenschaft verwendet wird, deren Wert mit einer calc()-Funktion erstellt wurde.

CSSStyleValue CSSNumericValue CSSMathValue CSSMathSum

In diesem Artikel

Konstruktor

CSSMathSum()

Erstellt ein neues CSSMathSum-Objekt.

Instanz-Eigenschaften

CSSMathSum.values

Gibt ein CSSNumericArray-Objekt zurück, das ein oder mehrere CSSNumericValue-Objekte enthält.

Statische Methoden

Das Interface kann auch Methoden von seinem übergeordneten Interface CSSMathValue erben.

Instanz-Methoden

Das Interface kann auch Methoden von seinem übergeordneten Interface CSSMathValue erben.

Beispiele

Wir erstellen ein Element mit einer width, die durch eine calc()-Funktion bestimmt wird, dann verwenden wir console.log(), um den operator und die values auszugeben, und untersuchen die Werte ein wenig.

html

<div>has width</div>

Wir weisen eine width zu

css
div {
  width: calc(30% - 20px);
}

Wir fügen das JavaScript hinzu

js
const styleMap = document.querySelector("div").computedStyleMap();

console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(styleMap.get("width").values[0]); // CSSUnitValue {value: 30, unit: "percent"}
console.log(styleMap.get("width").values[0].value); // 30
console.log(styleMap.get("width").values[0].unit); // 'percent'
console.log(styleMap.get("width").values[1]); // CSSUnitValue {value: -20, unit: "px"}
console.log(styleMap.get("width").values[1].value); //  -20
console.log(styleMap.get("width").values[1].unit); // 'px'

Die Spezifikation entwickelt sich noch weiter. In Zukunft könnten wir die letzten drei Zeilen wie folgt schreiben:

js
console.log(styleMap.get("width").values[1]); // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
console.log(styleMap.get("width").values[1].value); // CSSUnitValue {value: 20, unit: "px"}
console.log(styleMap.get("width").values[1].value.unit); // 'px'

Spezifikationen

Spezifikation

CSS Typed OM Level 1
# cssmathsum

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Typed Object Model API
CSSMathSum
Konstruktor
1. CSSMathSum()
Instanzeigenschaften
1. values
Vererbung
Verwandte Seiten für CSS Typed Object Model API
Anleitungen
1. Verwenden des CSS Typed Object Model