CSSNumericValue: Methode toSum()
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.
Die Methode toSum() der Schnittstelle CSSNumericValue wandelt den CSSNumericValue in ein CSSMathSum um, dessen Terme CSSUnitValue-Objekte in den angegebenen Einheiten sind.
Syntax
toSum()
toSum(unit1)
toSum(unit1, unit2)
toSum(unit1, unit2, /* …, */ unitN)
Parameter
unit1, …,unitNOptional-
Zeichenfolgen, die die Einheiten für die Terme des Ergebnisses angeben, etwa
"px"oder"percent".
Rückgabewert
Ein CSSMathSum, dessen Terme ausschließlich CSSUnitValue-Objekte sind.
Ausnahmen
SyntaxErrorDOMException-
Wird ausgelöst, wenn einer der Werte
unit1, …,unitNkeine gültige CSS-Einheit ist. TypeError-
Wird ausgelöst, wenn:
- sich der Wert nicht als Summe einzelner Werte darstellen lässt. Beispielsweise kann ein Term, der zwei Einheiten multipliziert, etwa
CSS.px(1).mul(CSS.s(1)), nicht alsCSSUnitValuedargestellt werden. - Einheiten übergeben werden und der Wert einen Term enthält, der in keine davon umgewandelt werden kann, etwa einen
em-Term, wenn nur"px"übergeben wird. - die übergebenen Einheiten nicht addiert werden können, etwa
"px"und"s".
- sich der Wert nicht als Summe einzelner Werte darstellen lässt. Beispielsweise kann ein Term, der zwei Einheiten multipliziert, etwa
Beschreibung
Die Methode fasst zunächst die Terme des CSSNumericValue zusammen, die sich in dieselbe Einheit umwandeln lassen, wie es auch to() tut.
Beispielsweise werden 1px und 1in zu 97px zusammengefasst.
Wenn Einheiten übergeben werden, enthält das Ergebnis für jede Einheit einen Term, und zwar in der Reihenfolge, in der die Einheiten übergeben wurden.
Jeder Term des Werts wird in die Einheit umgewandelt, mit der er kompatibel ist.
Wenn sich kein Term in eine der Einheiten umwandeln lässt, enthält das Ergebnis für diese Einheit einen Term mit dem Wert 0.
Beispielsweise gibt CSS.px(1).toSum("px", "percent") den Wert calc(1px + 0%) zurück.
Wenn keine Einheiten übergeben werden, enthält das Ergebnis für jede nach dem Zusammenfassen verbleibende Einheit einen Term.
Die Terme werden alphabetisch nach Einheitenname sortiert; der Name für % ist dabei "percent".
Beispielsweise ergibt calc(10px + 2em + 5px) den Wert calc(2em + 15px).
Beispiele
Eine Summe in bestimmte Einheiten umwandeln
const value = CSS.px(100).add(CSS.percent(10)).add(CSS.in(1));
console.log(value.toString()); // "calc(100px + 10% + 1in)"
console.log(value.toSum("px", "percent").toString()); // "calc(196px + 10%)"
console.log(CSS.px(1).toSum("px", "percent").toString()); // "calc(1px + 0%)"
Eine Summe vereinfachen
Wenn keine Einheiten übergeben werden, werden Terme mit derselben Einheit zusammengefasst und nach Einheitenname sortiert:
const value = CSS.px(10).add(CSS.em(2), CSS.px(5));
console.log(value.toString()); // "calc(10px + 2em + 5px)"
console.log(value.toSum().toString()); // "calc(2em + 15px)"
Werte, die nicht umgewandelt werden können
Eine Summe mit einem em-Term kann nicht ausschließlich in px umgewandelt werden:
try {
CSS.px(1).add(CSS.em(1)).toSum("px");
} catch (e) {
console.log(e instanceof TypeError); // true
}
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # dom-cssnumericvalue-tosum |