CSSKeywordValue

Konstruktor

CSSKeywordValue()

Erstellt ein neues CSSKeywordValue Objekt.

Instanz-Eigenschaften

CSSKeywordValue.value

Ein String, der den Wert des CSSKeywordValue reprsentiert.

Instanz-Methoden

Erbt auch Methoden von seiner bergeordneten Schnittstelle, CSSStyleValue.

Beispiele

Grundlegende Nutzung

Dieses Beispiel setzt die CSS-Eigenschaft display auf initial, wobei CSSKeywordValue zur Definition des Wertes verwendet wird.

HTML

Das HTML definiert ein Element, bei dem wir den Wert des display Schlsselworts setzen werden, ein <hr>-Element, einen Button, der verwendet wird, um den Wert des display Schlsselworts zu setzen, und einen "Zurcksetzen" Button, um das Beispiel zurckzusetzen.

<div id="myElement">
  Check the developer tools to see the log in the console and to inspect this
  div's style attributes.
</div>
<hr />
<button id="set-initial" type="button">Set initial</button>
<button id="reset" type="button">Reset</button>

CSS

Das CSS setzt das Element anfnglich auf flex, was es zwingt, in voller Breite angezeigt zu werden, und gibt ihm einen soliden Rahmen mit Padding und Rndern.

#myElement {
  display: flex;
  border: solid;
  padding: 10px;
  margin: 5px;
}

JavaScript

Der Code holt sich zuerst einen Zugriff auf den "Set initial" Button und fgt einen Listener hinzu, um das Klickereignis zu verarbeiten, wenn es gedrckt wird.

Der Listener erhlt dann die Inline-Stile des Elements mittels HTMLElement.attributeStyleMap, und setzt das display Attribut mit einem neu konstruierten CSSKeywordValue. Danach wird der Wert dieses Schlsselworts in der Konsole protokolliert.

const setInitialButton = document.querySelector("#set-initial");

setInitialButton.addEventListener("click", () => {
  const myElementInlineStyles =
    document.getElementById("myElement").attributeStyleMap;
  myElementInlineStyles.set("display", new CSSKeywordValue("initial"));
  console.log(`display: ${myElementInlineStyles.get("display").value}`);
});

Beachten Sie, dass wir den Wert der Inline-Stile nicht vor dem Drcken des Buttons protokollieren knnen, da keine vorhanden sind.

const resetButton = document.querySelector("#reset");
resetButton.addEventListener("click", () => {
  window.location.reload(true);
});

Ergebnis

Klicken Sie mit der rechten Maustaste auf das Element und ffnen Sie den Entwicklerwerkzeuge-Inspektor, um seine Stile zu inspizieren. Sie sollten sehen, dass display: flex auf #myElement gesetzt ist. Drcken Sie "Set initial", um den Inline-Stil von display auf "initial" zu setzen. Sie sollten sehen, wie sich die Stile im Inspektor ndern, und das Element wird sich auch leicht verkleinern, da flex deaktiviert ist.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• CSSImageValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue