CSSMathValue

Instanz-Eigenschaften

CSSMathValue.operator Schreibgeschützt

Gibt den Operator zurück, den der aktuelle Untertyp darstellt.

Statische Methoden

Erbt auch Methoden von seinem Elterninterface, CSSNumericValue.

Instanz-Methoden

Erbt auch Methoden von seinem Elterninterface, CSSNumericValue.

Schnittstellen basierend auf CSSMathValue

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

Beispiele

calc() Darstellungen

Dieses Beispiel zeigt, wie die operator Eigenschaft die Operation identifiziert, die von einem calc() Wert des CSSMathValue Untertyps dargestellt wird, einschließlich eines verschachtelten Wertes.

HTML

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

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

CSS

width wird mit einer calc() Subtraktion gesetzt, die als CSSMathSum dargestellt wird, dessen zweiter Term negiert ist.

#demoBox {
  width: calc(30% - 20px);
}

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

JavaScript

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

Wir lesen den width Wert mit computedStyleMap() und protokollieren dann seinen operator und den operator seines verschachtelten Wertes.

const styleMap = document.querySelector("#demoBox").computedStyleMap();
const width = styleMap.get("width");

log(`type: ${width.constructor.name}`);
log(`operator: ${width.operator}`);
log(`nested value type: ${width.values[1].constructor.name}`);
log(`nested value operator: ${width.values[1].operator}`);

Ergebnis

width wird durch ein CSSMathSum Objekt dargestellt, dessen operator "sum" ist, weil calc(30% - 20px) als Addition von 30% und der Negation von 20px dargestellt wird. Der zweite verschachtelte Werttyp ist CSSMathNegate und sein operator ist "negate" (was die Negation widerspiegelt).

Spezifikationen

Browser-Kompatibilität