DieCSS Typed Object Model API präsentiert CSS-Werte als typisierte JavaScript-Objekte, um deren effiziente Manipulation zu ermöglichen.

Das Umwandeln vonCSS Object Model-Wertzeichenfolgen in sinnvoll typisierte JavaScript-Darstellungen und zurück (überHTMLElement.style) kann einen erheblichen Performance-Overhead verursachen.

Das CSS Typed OM macht die Manipulation von CSS logischer und effizienter, indem es Objektfunktionen (anstatt CSSOM-Stringmanipulation), den Zugriff auf Typen, Methoden und ein Objektmodell für CSS-Werte bereitstellt.

Dieser Artikel bietet eine Einführung in alle seine Hauptfunktionen.

computedStyleMap()

Mit der CSS Typed OM API können wir auf alle CSS-Eigenschaften und -Werte zugreifen – einschließlich benutzerdefinierter Eigenschaften –, die ein Element beeinflussen. Lassen Sie uns sehen, wie das funktioniert, indem wir unser erstes Beispiel erstellen, dascomputedStyleMap() erkundet.

Alle Eigenschaften und Werte abrufen

HTML

Wir beginnen mit etwas HTML: einem Absatz mit einem Link sowie einer Definitionsliste, zu der wir alle CSS-Eigenschafts/Wert-Paare hinzufügen werden.

<p>  <a href="https://example.com">Link</a></p><dl></dl>

JavaScript

Wir fügen JavaScript hinzu, um unseren ungestylten Link zu erfassen und eine Definitionsliste aller Standard-CSS-Eigenschaftswerte zurückzugeben, die den Link mithilfe voncomputedStyleMap() beeinflussen.

// Get the elementconst myElement = document.querySelector("a");// Get the <dl> we'll be populatingconst stylesList = document.querySelector("#regurgitation");// Retrieve all computed styles with computedStyleMap()const defaultComputedStyles = myElement.computedStyleMap();// Iterate through the map of all the properties and values, adding a <dt> and <dd> for eachfor (const [prop, val] of defaultComputedStyles) {  // properties  const cssProperty = document.createElement("dt");  cssProperty.appendChild(document.createTextNode(prop));  stylesList.appendChild(cssProperty);  // values  const cssValue = document.createElement("dd");  cssValue.appendChild(document.createTextNode(val));  stylesList.appendChild(cssValue);}

DiecomputedStyleMap()-Methode gibt einStylePropertyMapReadOnly-Objekt zurück, das diesize-Eigenschaft enthält, welche anzeigt, wie viele Eigenschaften sich in der Map befinden. Wir iterieren durch die Style-Map und erstellen ein<dt> und ein<dd> für jede Eigenschaft und jeden Wert.

Ergebnis

InBrowsern, diecomputedStyleMap() unterstützen, sehen Sie eine Liste aller CSS-Eigenschaften und -Werte. In anderen Browsern sehen Sie nur einen Link.

Haben Sie bemerkt, wie viele Standard-CSS-Eigenschaften ein Link hatte? Aktualisieren Sie den erstendocument.querySelector-Aufruf, um statt der<a> das<p> auszuwählen. Sie werden einen Unterschied in den standardmäßig berechneten Werten vonmargin-top undmargin-bottom feststellen.

.get() Methode / benutzerdefinierte Eigenschaften

Aktualisieren wir unser Beispiel, um nur ein paar Eigenschaften und Werte abzurufen. Beginnen wir mit dem Hinzufügen einiger CSS-Stile zu unserem Beispiel, einschließlich einer benutzerdefinierten Eigenschaft und einer vererbbaren Eigenschaft:

p {  font-weight: bold;}a {  --color: red;  color: var(--color);}

Anstattalle Eigenschaften abzurufen, erstellen wir ein Array von interessanten Eigenschaften und verwenden die MethodeStylePropertyMapReadOnly.get(), um jeden ihrer Werte zu erhalten:

<p>  <a href="https://example.com">Link</a></p><dl></dl>

// Get the elementconst myElement = document.querySelector("a");// Get the <dl> we'll be populatingconst stylesList = document.querySelector("#regurgitation");// Retrieve all computed styles with computedStyleMap()const allComputedStyles = myElement.computedStyleMap();// Array of properties we're interested inconst ofInterest = ["font-weight", "border-left-color", "color", "--color"];// iterate through our properties of interestfor (const value of ofInterest) {  // Properties  const cssProperty = document.createElement("dt");  cssProperty.appendChild(document.createTextNode(value));  stylesList.appendChild(cssProperty);  // Values  const cssValue = document.createElement("dd");  cssValue.appendChild(document.createTextNode(allComputedStyles.get(value)));  stylesList.appendChild(cssValue);}

Wir habenborder-left-color aufgenommen, um zu zeigen, dass, wenn wir alle Eigenschaften aufgenommen hätten, jeder Wert, der aufcurrentColor standardmäßig festgelegt ist (einschließlichcaret-color,outline-color,text-decoration-color,column-rule-color, usw.),rgb(255 0 0) zurückgeben würde. Der Link hatfont-weight: bold; von den Absatzstilen geerbt und zeigt es alsfont-weight: 700. Benutzerdefinierte Eigenschaften, wie unser--color: red, sind Eigenschaften. Daher sind sie überget() zugänglich.

Sie werden feststellen, dass benutzerdefinierte Eigenschaften den Wert so beibehalten, wie er im Stylesheet geschrieben wurde, während berechnete Stile als der berechnete Wert angezeigt werden –color wurde als einrgb() Wert aufgelistet und der zurückgegebene Wert vonfont-weight war700, obwohl wir einebenannte Farbe und dasbold Schlüsselwort verwenden.

CSSUnitValue und CSSKeywordValue

Die Stärke des CSS Typed OM besteht darin, dass Werte von Einheiten getrennt sind; das Parsen und Verketteten von String-Werten könnte der Vergangenheit angehören. Jede CSS-Eigenschaft in einer Style-Map hat einen Wert. Wenn der Wert ein Schlüsselwort ist, ist das zurückgegebene Objekt einCSSKeywordValue. Wenn der Wert numerisch ist, wird einCSSUnitValue zurückgegeben.

CSSKeywordValue ist eine Klasse, die Schlüsselwörter wieinherit,initial,unset und andere Zeichenfolgen definiert, die Sie nicht in Anführungszeichen setzen, wieauto undgrid. Diese Unterklasse gibt Ihnen einevalue-Eigenschaft übercssKeywordValue.value.

CSSUnitValue wird zurückgegeben, wenn der Wert ein Einheitentyp ist. Es ist eine Klasse, die Zahlen mit Maßeinheiten wie20px,40%,200ms oder7 definiert. Sie wird mit zwei Eigenschaften zurückgegeben: einemvalue und einerunit. Mit diesem Typ können wir auf den numerischen Wert —cssUnitValue.value — und seine Einheit —cssUnitValue.unit zugreifen.

Lassen Sie uns einen einfachen Absatz schreiben, keine Stile anwenden und einige seiner CSS-Eigenschaften inspizieren, indem wir eine Tabelle mit Einheit und Wert zurückgeben:

<p>  This is a paragraph with some content. Open up this example in CodePen or  JSFiddle, and change some features. Try adding some CSS, such as a width for  this paragraph, or adding a CSS property to the ofInterest array.</p><table>  <thead>    <tr>      <th>Property</th>      <th>Value</th>      <th>Unit</th>    </tr>  </thead></table>

Für jede interessante Eigenschaft listen wir den Namen der Eigenschaft auf, verwenden.get(propertyName).value, um den Wert zurückzugeben, und wenn das vonget() zurückgegebene Objekt einCSSUnitValue ist, listen wir den Einheitstyp auf, den wir mit.get(propertyName).unit abrufen.

// Get the element we're inspectingconst myElement = document.querySelector("p");// Get the table we'll be populatingconst stylesTable = document.querySelector("#regurgitation");// Retrieve all computed styles with computedStyleMap()const allComputedStyles = myElement.computedStyleMap();// Array of properties we're interested inconst ofInterest = [  "padding-top",  "margin-bottom",  "font-size",  "font-stretch",  "animation-duration",  "animation-iteration-count",  "width",  "height",];// Iterate through our properties of interestfor (const value of ofInterest) {  // Create a row  const row = document.createElement("tr");  // Add the name of the property  const cssProperty = document.createElement("td");  cssProperty.appendChild(document.createTextNode(value));  row.appendChild(cssProperty);  // Add the unitless value  const cssValue = document.createElement("td");  // Shrink long floats to 1 decimal point  let propVal = allComputedStyles.get(value).value;  propVal = propVal % 1 ? propVal.toFixed(1) : propVal;  cssValue.appendChild(document.createTextNode(propVal));  row.appendChild(cssValue);  // Add the type of unit  const cssUnit = document.createElement("td");  cssUnit.appendChild(    document.createTextNode(allComputedStyles.get(value).unit),  );  row.appendChild(cssUnit);  // Add the row to the table  stylesTable.appendChild(row);}

Für diejenigen, die einen nicht unterstützenden Browser verwenden, sollte die obige Ausgabe ungefähr so aussehen:

Sie werden feststellen, dass die Einheit<length> alspx zurückgegeben wird, die Einheit<percentage> alspercent, die Einheit<time> alss für 'Sekunden' und die einheitenlose Einheit<number> alsnumber.

Wir haben keinewidth oderheight für den Absatz deklariert, die beide aufauto standardmäßig festgelegt sind und daher einCSSKeywordValue anstelle einesCSSUnitValue zurückgegeben.CSSKeywordValue-Werte haben keine Einheitseigenschaft, daher gibt unserget().unit in diesen Fällenundefined zurück.

Wärenwidth oderheight als <length> oder <percent> definiert, wäre dieCSSUnitValue-Einheit entsprechendpx oderpercent gewesen.

Es gibt andere verfügbare Typen:

• Ein<image> gibt einCSSImageValue zurück.
• Ein<color> würde einCSSStyleValue zurückgeben.
• Eintransform gibt einCSSTransformValue zurück.
• Einebenutzerdefinierte Eigenschaft gibt einCSSUnparsedValue zurück.

Sie können einCSSUnitValue oderCSSKeywordValue verwenden, um andere Objekte zu erstellen.

CSSStyleValue

DasCSSStyleValue-Interface desCSS Typed Object Model API ist die Basisklasse aller durch die Typed OM API zugänglichen CSS-Werte, einschließlichCSSImageValue,CSSKeywordValue,CSSNumericValue,CSSPositionValue,CSSTransformValue undCSSUnparsedValue.

Es hat zwei Methoden:

• CSSStyleValue.parse()
• CSSStyleValue.parseAll()

Wie oben erwähnt, gibtStylePropertyMapReadOnly.get('--customProperty') einCSSUnparsedValue zurück. Wir könnenCSSUnparsedValue-Objektinstanzen mit den geerbten MethodenCSSStyleValue.parse() undCSSStyleValue.parseAll() parsen.

Untersuchen wir ein CSS-Beispiel mit mehreren benutzerdefinierten Eigenschaften, Transformationen,calc()-Funktionen und anderen Features. Wir betrachten, welche Typen sie haben, indem wir kurze JavaScript-Snippets verwenden, die anconsole.log() ausgeben:

:root {  --main-color: hsl(198 43% 42%);  --black: hsl(0 0% 16%);  --white: hsl(0 0% 97%);  --unit: 1.2rem;}button {  --main-color: hsl(198 100% 66%);  display: inline-block;  padding: var(--unit) calc(var(--unit) * 2);  width: calc(30% + 20px);  background: no-repeat 5% center url("magic-wand.png") var(--main-color);  border: 4px solid var(--main-color);  border-radius: 2px;  font-size: calc(var(--unit) * 2);  color: var(--white);  cursor: pointer;  transform: scale(0.95);}

Fügen wir die Klasse zu einem Button hinzu (einem Button, der nichts tut).

<button>Styled Button</button>

<p>  There is nothing to see here. Please open your browser console to see the  output!</p>

Wir erfassen unsereStylePropertyMapReadOnly mit dem folgenden #"button").computedStyleMap();