CSSKeywordValue

Konstruktor

CSSKeywordValue()

Erstellt ein neues CSSKeywordValue-Objekt.

Instanz-Eigenschaften

CSSKeywordValue.value

Ein String, der den Wert des CSSKeywordValue repräsentiert.

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-Schlüsselworts setzen werden, ein <hr>-Element, ein Button, der verwendet wird, um den Wert des display-Schlüsselworts zu setzen, und einen "Reset"-Button, um das Beispiel zurückzusetzen.

<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 zunächst auf flex, wodurch es in voller Breite angezeigt wird, und gibt ihm einen soliden Rahmen mit Polsterung und Rändern.

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

JavaScript

Der Code holt zunächst einen Verweis auf den Button "Set initial" und fügt einen Listener hinzu, um das Klick-Event zu behandeln, wenn es gedrückt wird.

Der Listener erhält dann die Inline-Stile des Elements mithilfe von must be provided, und setzt das display-Attribut mit einem neu konstruierten CSSKeywordValue. Anschließend wird der Wert dieses Schlüsselworts 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 können, bevor der Button gedrückt 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. Drücken 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-Kompatibilität

Siehe auch

• CSSImageValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue