Limited availability
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.
CSSMathSum() Experimentell
Erstellt ein neues CSSMathSum-Objekt.
CSSMathSum.values
Gibt ein CSSNumericArray-Objekt zurück, das ein oder mehrere CSSNumericValue-Objekte enthält.
Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue erben.
Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue erben.
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.
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 weiter. In Zukunft könnten die letzten drei Zeilen wie folgt geschrieben werden:
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'
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4