CSSKeywordValue

Constructor

CSSKeywordValue()

Creates a new CSSKeywordValue object.

Instance properties

CSSKeywordValue.value

A string that represents the value of the CSSKeywordValue.

Instance methods

Also inherits methods from its parent interface, CSSStyleValue.

Examples

Basic usage

This example sets the CSS display property to initial, using CSSKeywordValue to define the value.

HTML

The HTML defines an element on which we'll set the value of the display keyword, an <hr> element, a button that will be used to set the value of the display keyword, and a "Reset" button to reset the example.

<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

The CSS initially sets the element to flex, which forces it to display full-width, and gives it a solid border with padding and margins.

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

JavaScript

The code first gets a handle to the "Set initial" button and adds a listener to handle the click event when it is pressed.

The listener then gets the element's inline styles using must be provided, and sets the display attribute with a newly constructed CSSKeywordValue. It then logs the value of that keyword to the console.

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}`);
});

Note that we can't log the value of the inline styles before pressing the button, because there aren't any.

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

Result

Right click on the element and open the developer tools inspector to inspect its styles. You should see that display: flex is set on #myElement. Press "Set initial" to make set the inline style of display to "initial". You should see the styles change in the inspector, and the element will also shrink slightly as the flex is disabled.

Specifications

Browser compatibility

See also

• CSSImageValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue