CSSMathSum - Web-APIs | MDN
Konstruktor
CSSMathSum()Experimentell-
Erstellt ein neues
CSSMathSum-Objekt.
Instanz-Eigenschaften
CSSMathSum.values-
Gibt ein
CSSNumericArray-Objekt zurück, das ein oder mehrereCSSNumericValue-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.
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
Help improve MDN
Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.