CSSMathSum

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die CSSMathSum-Schnittstelle 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 eine CSS-Eigenschaft angewendet wird, deren Wert mit einer calc()-Funktion erstellt wurde.

CSSStyleValue CSSNumericValue CSSMathValue CSSMathSum

Konstruktor

CSSMathSum() Experimentell

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

Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue erben.

Instanz-Methoden

Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue erben.

Beispiele

Wir erstellen ein Element mit einer width, die mit einer calc()-Funktion bestimmt wird, und nutzen console.log(), um den operator und die values auszugeben, und untersuchen die Werte etwas genauer.

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 die letzten drei Zeilen wie folgt geschrieben werden:

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

Specification
CSS Typed OM Level 1
# cssmathsum

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSMathSum
CSSMathSum() constructor
Experimental
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.