CSSMathProduct

Konstruktor

CSSMathProduct()

Erstellt ein neues CSSMathProduct-Objekt.

Instanzeigenschaften

Erbt außerdem Eigenschaften von der übergeordneten Schnittstelle CSSMathValue.

CSSMathProduct.values Schreibgeschützt

Gibt ein CSSNumericArray-Objekt zurück, das ein oder mehrere CSSNumericValue-Objekte enthält.

Statische Methoden

Erbt außerdem Methoden von der übergeordneten Schnittstelle CSSMathValue.

Instanzmethoden

Erbt außerdem Methoden von der übergeordneten Schnittstelle CSSMathValue.

Beschreibung

Ein CSSMathProduct entsteht immer dann, wenn sich eine Multiplikation oder Division nicht zu einem einzelnen Wert auflösen lässt. Das ist der Fall, wenn einer der Werte selbst eine Berechnung statt eines einzelnen Werts mit Einheit ist – beispielsweise beim Multiplizieren oder Dividieren einer Summe wie 1px + 2%. Bei einer Multiplikation ist das auch der Fall, wenn mehr als ein Wert eine Einheit hat, etwa bei 10px * 20px oder einer Länge multipliziert mit einem Prozentwert. Bei einer Division ist es immer dann der Fall, wenn ein Divisor eine Einheit hat, etwa bei 10px / 2px oder 10 / 2px.

mul() gibt nur dann einen einzelnen CSSUnitValue zurück, wenn jeder Wert ein CSSUnitValue ist und entweder alle Werte oder alle bis auf einen reine Zahlen sind. div() funktioniert genauso, mit dem Unterschied, dass jeder Divisor eine reine Zahl sein muss. Andernfalls geben beide Methoden ein CSSMathProduct zurück.

StylePropertyMapReadOnly.get() gibt auf dieselbe Weise ein CSSMathProduct zurück – bei einem calc()-Wert, der auf eine Multiplikation oder Division hinausläuft, die sich nicht zu einem einzelnen Wert zusammenfassen lässt.

CSSMathProduct stellt den Produktausdruck selbst dar, nicht einen aufgelösten Wert. Um den aufgelösten Wert zu erhalten, verwenden Sie getComputedStyle().

Beispiele

Grundlegende Verwendung

Der folgende Code erstellt aus zwei Werten eine CSSMathProduct-Instanz und liest anschließend ihre Eigenschaften operator und values aus.

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"}

Darstellungen von calc()

Dieses Beispiel zeigt, wie eine Multiplikation mit calc() je nachdem, ob sie sich zu einem einzelnen Wert auflösen lässt, durch einen CSSUnitValue oder ein CSSMathProduct dargestellt wird.

HTML

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

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

CSS

width wird mit einem calc()-Produkt aus einer Länge und einer reinen Zahl festgelegt. Daher kann der Browser es unmittelbar zu einem einzelnen festen Wert auflösen. font-size wird mit einem calc()-Produkt festgelegt, das eine reine Zahl mit einer eingeklammerten Summe aus 1rem und 5vw multipliziert. Da sich die Summe selbst nicht zu einem einzelnen Wert zusammenfassen lässt (sie enthält unterschiedliche Einheiten), gilt das auch für das Produkt. Es wird daher durch ein CSSMathProduct dargestellt.

#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 ermitteln wir die Stilregel der Demo-Box und lesen mithilfe von styleMap ihre Werte für width und font-size 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");

Anschließend geben wir Typ und Wert der Darstellungen im CSS Typed OM aus, gefolgt von den berechneten (aufgelösten) 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 dargestellt, dessen Wert der aufgelösten Breite entspricht. font-size wird durch ein CSSMathProduct-Objekt dargestellt, das die ursprünglichen Terme des calc()-Produkts zugänglich macht.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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