CSSMathValue: operator-Eigenschaft
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 operator Lese-only Eigenschaft der CSSMathValue-Schnittstelle gibt den Operator zurück, den der aktuelle Subtyp repräsentiert.
Zum Beispiel, wenn der aktuelle CSSMathValue Subtyp CSSMathSum ist, gibt diese Eigenschaft den String "sum" zurück.
Wert
Ein String.
| Schnittstelle | Wert |
|---|---|
CSSMathSum |
"sum" |
CSSMathProduct |
"product" |
CSSMathMin |
"min" |
CSSMathMax |
"max" |
CSSMathClamp |
"clamp" |
CSSMathNegate |
"negate" |
CSSMathInvert |
"invert" |
Beispiele
Grundlegende Verwendung
Dieses Beispiel zeigt, wie die operator-Eigenschaft die Operation identifiziert, die von einem calc()-Wert des CSSMathValue-Subtyps repräsentiert wird, einschließlich für einen geschachtelten Wert.
HTML
<div id="demoBox">Text</div>
CSS
width wird mit einer calc()-Subtraktion gesetzt, was als CSSMathSum dargestellt wird, dessen zweiter Term negiert ist.
#demoBox {
width: calc(50% - 0.5vw);
}
JavaScript
Wir lesen den width-Wert mit computedStyleMap() und protokollieren dann seinen operator und den operator seines geschachtelten Wertes.
const styleMap = document.querySelector("#demoBox").computedStyleMap();
const width = styleMap.get("width");
log(`operator: ${width.operator}`);
log(`nested value operator: ${width.values[1].operator}`);
Ergebnis
width wird durch ein CSSMathSum-Objekt dargestellt, dessen operator "sum" ist, weil calc(50% - 0.5vw) als Addition von 50% und der Negation von 0.5vw dargestellt wird.
Der operator des zweiten geschachtelten Wertes ist "negate", was die Negation widerspiegelt.
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # dom-cssmathvalue-operator |