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 seinem Eltern-Interface CSSStyleValue.

Beispiele

Grundlegende Verwendung

Dieses Beispiel setzt die CSS-Eigenschaft display auf initial, wobei CSSKeywordValue verwendet wird, um den Wert zu definieren.

HTML

Das HTML definiert ein Element, bei dem wir den Wert des display-Schlsselworts setzen werden, ein <hr>-Element, ein Button, der verwendet wird, um den Wert des display-Schlsselworts zu setzen, und einen "Reset"-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 zunchst auf flex, wodurch es in voller Breite angezeigt wird, und gibt ihm einen soliden Rahmen mit Polsterung und Rndern.

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

JavaScript

Der Code holt zunchst einen Verweis auf den Button "Set initial" und fgt einen Listener hinzu, um das Klick-Event zu behandeln, wenn es gedrckt wird.

Der Listener erhlt dann die Inline-Stile des Elements mithilfe von must be provided, und setzt das display-Attribut mit einem neu konstruierten CSSKeywordValue. Anschlieend 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 protokollieren knnen, bevor der Button gedrckt wird, 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 Entwicklertools-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, dass sich die Stile im Inspektor ndern, und das Element wird auch leicht schrumpfen, da das flex deaktiviert ist.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• CSSImageValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue