CSSMathProduct

Konstruktor

CSSMathProduct()

Erstellt ein neues CSSMathProduct-Objekt.

Instanzeigenschaften

Erbt auch Eigenschaften von ihrer Elternschnittstelle, CSSMathValue.

CSSMathProduct.values Schreibgeschtzt

Gibt ein CSSNumericArray-Objekt zurck, das ein oder mehrere CSSNumericValue-Objekte enthlt.

Statische Methoden

Erbt auch Methoden von ihrer Elternschnittstelle, CSSMathValue.

Instanzmethoden

Erbt auch Methoden von ihrer Elternschnittstelle, CSSMathValue.

Beschreibung

Ein CSSMathProduct wird erzeugt, wenn eine Multiplikation oder Division nicht auf einen einzelnen Wert reduziert werden kann dies passiert, wenn mehr als ein Operand eine Einheit trgt, zum Beispiel das Multiplizieren zweier Lngen (10px * 20px) oder einer Lnge mit einem Prozentsatz, anstatt eines Wertes mit einer einfachen Zahl.

Das Aufrufen von mul() oder div() auf Operanden, die nicht kombiniert werden knnen, gibt ein CSSMathProduct zurck; wenn jeder Operand eine einfache Zahl ist oder alle bis auf einen, werden sie sofort zu einem einzelnen CSSUnitValue aufgelst.

StylePropertyMapReadOnly.get() gibt ein CSSMathProduct auf die gleiche Weise zurck fr einen calc()-Wert, der zu einer Multiplikation oder Division aufgelst wird, die nicht zu einem Wert kombiniert werden kann.

CSSMathProduct reprsentiert den Produktausdruck selbst, nicht einen aufgelsten Wert. Um den aufgelsten Wert zu erhalten, verwenden Sie getComputedStyle().

Beispiele

Grundlegende Verwendung

Der folgende Code erstellt eine CSSMathProduct-Instanz aus zwei Werten und liest dann ihre operator- und values-Eigenschaften zurck.

const product = new CSSMathProduct(CSS.px(10), CSS.percent(50));

console.log(product.constructor.name); // "CSSMathProduct"
console.log(product.operator); // 'product'
console.log(product.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(product.values[0]); // CSSUnitValue {value: 10, unit: "px"}

calc()-Darstellungen

Dieses Beispiel zeigt, wie eine calc()-Multiplikation durch einen CSSUnitValue oder ein CSSMathProduct reprsentiert wird, abhngig davon, ob sie zu einem einzelnen Wert aufgelst werden kann.

HTML

<div id="demoBox">Text</div>

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

CSS

width wird mittels eines calc()-Produkts aus einer Lnge und einer einfachen Zahl gesetzt, sodass der Browser es sofort in einen einzelnen festen Wert auflsen kann. font-size wird mit einem calc()-Produkt gesetzt, das eine einfache Zahl mit einer geklammerten Summe von 1rem und 5vw multipliziert; da die Summe selbst nicht in einen einzelnen Wert kombiniert werden kann (da sie Einheiten mischt), kann das Produkt es auch nicht, und dies wird durch ein CSSMathProduct reprsentiert.

#demoBox {
  width: calc(10px * 2);
  font-size: calc(2 * (1rem + 5vw));
}

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

JavaScript

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

Zuerst finden wir die Stilregel der Demo-Box und lesen ihre width- und font-size-Werte mit styleMap aus.

const demoBox = document.querySelector("#demoBox");

const rules = document.getElementById("css-output").sheet.cssRules;
const rule = [...rules].find((r) => r.selectorText === "#demoBox");
const styleMap = rule.styleMap;
const width = styleMap.get("width");
const fontSize = styleMap.get("font-size");

Dann protokollieren wir den Typ und den Wert der CSS Typed OM-Darstellungen, gefolgt von den berechneten (aufgelsten) Werten.

log("width");
log(` type: ${width.constructor.name}`);
log(` value: ${width}`);
log(` resolved: ${getComputedStyle(demoBox).width}`);

log("\nfont-size");
log(` type: ${fontSize.constructor.name}`);
log(` values: [${[...fontSize.values].join(", ")}]`);
log(` resolved: ${getComputedStyle(demoBox).fontSize}`);

Ergebnis

width wird durch ein CSSUnitValue-Objekt reprsentiert, das einen Wert hat, der der aufgelsten Breite entspricht. font-size wird durch ein CSSMathProduct-Objekt reprsentiert, das die ursprnglichen Terme des calc()-Produkts ausgibt.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• mul()
• div()
• CSSMathValue.operator
• CSSMathInvert
• CSSMathSum