CSSNumericValue

Instanzeigenschaften

Keine.

Statische Methoden

CSSNumericValue.parse()

Erstellt einen CSSNumericValue aus einer CSS-Zeichenfolge wie "42px".

Instanzmethoden

CSSNumericValue.add()

Gibt einen neuen Wert zurück, der die Summe des CSSNumericValue und der übergebenen Werte ist.

CSSNumericValue.sub()

Gibt einen neuen Wert zurück, der dem CSSNumericValue abzüglich der übergebenen Werte entspricht.

CSSNumericValue.mul()

Gibt einen neuen Wert zurück, der dem CSSNumericValue multipliziert mit den übergebenen Werten entspricht.

CSSNumericValue.div()

Gibt einen neuen Wert zurück, der dem CSSNumericValue dividiert durch die übergebenen Werte entspricht.

CSSNumericValue.min()

Gibt den kleinsten Wert aus dem CSSNumericValue und den übergebenen Werten zurück oder ein CSSMathMin, wenn nicht alle dieselbe Einheit haben.

CSSNumericValue.max()

Gibt den größten Wert aus dem CSSNumericValue und den übergebenen Werten zurück oder ein CSSMathMax, wenn nicht alle dieselbe Einheit haben.

CSSNumericValue.equals()

Gibt true zurück, wenn jeder übergebene Wert mit dem CSSNumericValue übereinstimmt und mit denselben Werten und Einheiten geschrieben ist, andernfalls false.

CSSNumericValue.to()

Konvertiert den CSSNumericValue in einen CSSUnitValue mit der angegebenen Einheit.

CSSNumericValue.toSum()

Konvertiert den CSSNumericValue in eine CSSMathSum, deren Terme nur die angegebenen Einheiten verwenden, oder in die einfachste entsprechende Summe, wenn keine Einheiten angegeben sind.

CSSNumericValue.type()

Gibt ein CSSNumericType-Dictionary zurück, das den Typ des CSSNumericValue beschreibt, beispielsweise eine Länge oder einen Winkel.

Auf CSSNumericValue basierende Schnittstellen

Die folgenden Schnittstellen erben von CSSNumericValue:

• CSSMathClamp
• CSSMathInvert
• CSSMathMax
• CSSMathMin
• CSSMathNegate
• CSSMathProduct
• CSSMathSum
• CSSMathValue
• CSSUnitValue

Beispiele

Arithmetische Operationen mit numerischen Werten

Der folgende Code addiert und multipliziert numerische Werte, die mit den numerischen Factory-Funktionen erstellt wurden. Wenn sich das Ergebnis als einzelner Wert mit einer Einheit darstellen lässt, gibt die Methode einen CSSUnitValue zurück. Andernfalls gibt sie einen der Subtypen von CSSMathValue zurück, bei denen die Terme getrennt bleiben.

const sameUnits = CSS.px(10).add(CSS.px(5));
console.log(sameUnits.constructor.name); // "CSSUnitValue"
console.log(sameUnits.toString()); // "15px"

const mixedUnits = CSS.px(10).add(CSS.percent(5));
console.log(mixedUnits.constructor.name); // "CSSMathSum"
console.log(mixedUnits.toString()); // "calc(10px + 5%)"

const doubled = CSS.px(10).mul(2);
console.log(doubled.toString()); // "20px"

Eine Box durch arithmetische Operationen verbreitern

In diesem Beispiel werden die arithmetischen Methoden verwendet, um eine Box bei jedem Klick auf eine Schaltfläche bis zu einer maximalen Breite zu verbreitern. Beachten Sie, dass es ausgeblendeten Code für die Protokollierung gibt, der für das Beispiel nicht relevant ist.

HTML

Zunächst definieren wir die Box, die verbreitert werden soll, und die Schaltfläche, die wir dafür verwenden.

<div id="grow-box"></div>
<button id="grow-button">Grow by 20px</button>

<pre id="log"></pre>

CSS

Die Box ist anfangs 100 Pixel breit.

#grow-box {
  width: 100px;
  height: 50px;
  margin-bottom: 1rem;
  background-color: #6666dd;
}

#log {
  height: 120px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

Der Code ruft zunächst die Box und die Schaltfläche ab und legt die maximale Breite als CSSUnitValue fest. Anschließend ruft er mit computedStyleMap() die anfängliche Breite der Box ab und protokolliert sie zusammen mit ihrem type().

const growBox = document.getElementById("grow-box");
const growButton = document.getElementById("grow-button");
const maxWidth = CSS.px(300);

const startWidth = growBox.computedStyleMap().get("width");
log(`start: ${startWidth}, type: ${JSON.stringify(startWidth.type())}`);

Bei jedem Klick auf die Schaltfläche liest der Handler die aktuelle Breite der Box aus und addiert mit add() 20 Pixel dazu. Anschließend stellt er mit min() sicher, dass die neue Breite nie größer als maxWidth ist. Da alle Werte in px angegeben sind, gibt jede Methode einen einzelnen CSSUnitValue zurück, den der Handler als neue Breite der Box festlegt.

growButton.addEventListener("click", () => {
  const width = growBox.computedStyleMap().get("width");
  const newWidth = width.add(CSS.px(20)).min(maxWidth);
  growBox.attributeStyleMap.set("width", newWidth);
  log(`width: ${newWidth}`);
});

Ergebnis

Klicken Sie auf die Schaltfläche, um die Box zu verbreitern. Das Protokoll beginnt mit der Breite der Box und ihrem Typ, {"length":1}. Das bedeutet, dass die Breite eine Länge ist. Danach zeigt es die neue Breite nach jedem Klick an. Bei 300px wird die Box nicht mehr breiter.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSImageValue
• CSSKeywordValue
• CSSTransformValue
• CSSUnparsedValue