CSSMathSum
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das CSSMathSum-Interface der CSS Typed Object Model API repräsentiert das Ergebnis, das durch den Aufruf von add(), sub() oder toSum() auf CSSNumericValue erhalten wird.
Ein CSSMathSum ist der Objekttyp, der zurückgegeben wird, wenn die Methode StylePropertyMapReadOnly.get() auf eine CSS-Eigenschaft angewendet wird, deren Wert mit einer calc()-Funktion erstellt wurde.
Konstruktor
CSSMathSum()-
Erstellt ein neues
CSSMathSum-Objekt.
Instanz-Eigenschaften
Erbt auch Eigenschaften von seinem übergeordneten Interface, CSSMathValue.
CSSMathSum.values-
Gibt ein
CSSNumericArray-Objekt zurück, das ein oder mehrereCSSNumericValue-Objekte enthält.
Statische Methoden
Erbt auch Methoden von seinem übergeordneten Interface, CSSMathValue.
Instanz-Methoden
Erbt auch Methoden von seinem übergeordneten Interface, CSSMathValue.
Beispiele
Wir erstellen ein Element mit einer width, die unter Verwendung einer calc()-Funktion bestimmt wird, dann nutzen wir console.log() für den operator und die values, und untersuchen die Werte etwas näher.
<div>has width</div>
Wir weisen eine width zu
div {
width: calc(30% - 20px);
}
Wir fügen das JavaScript hinzu
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. In der Zukunft könnten wir die letzten drei Zeilen folgendermaßen schreiben:
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 |