CSSStyleProperties

Instance properties

This interface also inherits properties of its parent, CSSStyleDeclaration.

Named properties

Dash-named and camel-case-named properties for all CSS properties supported by the browser.

CSSStyleProperties.cssFloat

Special alias for the float CSS property.

Instance methods

This interface inherits the methods of its parent, CSSStyleDeclaration.

Description

An object of this type has dash-named properties for all CSS properties supported by the browser, including both shorthand and longhand properties, and those with -moz and -webkit prefixes. These can accessed using methods inherited from the CSSStyleProperties base class, such as getPropertyValue() and setPropertyValue().

In addition, each dash-cased property has a corresponding camel case-named property, where the name is generated by removing the dashes and capitalizing each word after the first one. This allows you to, for example, access the margin-top CSS property using the syntax style.marginTop (where style is a CSSStyleProperties), instead of the more cumbersome style.getPropertyValue("margin-top") or style["margin-top"]. The CSS property float, being a reserved JavaScript keyword, is represented by the cssFloat property.

Shorthand CSS properties of the element are expanded to their corresponding long-form properties. For example, an element with style "border-top: 1px solid black" would be represented in the returned object by properties with the names border-top and borderTop, and the corresponding longhand properties border-top-color and borderTopColor, border-top-style and borderTopStyle, and border-top-width and borderTopWidth.

Properties and attributes with no defined value default to the empty string (""). For an object representing an inline style declaration (not computed styles) this will be any style that is not defined in the declaration block.

CSSStyleProperties object instances are exposed using the following APIs:

• HTMLElement.style, SVGElement.style, and MathMLElement.style: Used to get and set the inline style of a single element (e.g., <div style="…">).
• Window.getComputedStyle(): Used to get the (read only) computed style of an element, which includes the effects of both inline and external styles.
• CSSStyleRule.style: Used to get and set the styles of a stye rule (CSSStyleRule).

Examples

Basic usage

This example demonstrates how to get and set local and computed element styles using both camel case and dash-named properties.

HTML

The HTML defines a <div> with a number of styles set, nested within another that sets the font-weight as bold.

<div style="font-weight: bold;">
  <div style="border-top: 3px solid blue; color: red;margin:5px;" id="elt">
    Div content.
    <br />
    Inner: "border-top: 3px solid blue; color: red;margin:5px;".
    <br />
    Outer: "font-weight: bold;"
  </div>
</div>

<pre id="log"></pre>

#log {
  height: 140px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

First get the local and computed style for the element with the ID of "elt".

const element = document.querySelector("#elt");
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element);

Then we get the borderTop shorthand property of the CSSStyleProperties using the dot notation for both local and computed styles. Using the dot notation with a camel case property is the easiest way to access any property.

// Get style using dot notation
const elem_borderTop = elementStyle.borderTop;
const comp_borderTop = computedStyle.borderTop;

log('Format: Style = "Element" / "Computed"');
log(`"borderTop" = "${elem_borderTop}" / "${comp_borderTop}"'`);

We can also get the same property using the getPropertyValue() method or bracket notation.

// Get style using dashed-name property value
const elem_border_top = elementStyle.getPropertyValue("border-top");
const comp_border_top = computedStyle.getPropertyValue("border-top");
log(`"border-top" = "${elem_border_top}" / "${elem_border_top}"'`);

The following code gets each of the longhand properties that correspond to the shorthand property border-top, using the dot notation for simplicity.

// Get shorthand properties using dot notation
const elem_borderTopWidth = elementStyle.borderTopWidth;
const comp_borderTopWidth = computedStyle.borderTopWidth;
log(`"borderTopWidth" = "${elem_borderTopWidth}" / "${comp_borderTopWidth}"'`);

const elem_borderTopColor = elementStyle.borderTopColor;
const comp_borderTopColor = computedStyle.borderTopColor;
log(`"borderTopColor" = "${elem_borderTopColor}" / "${comp_borderTopColor}"'`);

const elem_borderTopStyle = elementStyle.borderTopStyle;
const comp_borderTopStyle = computedStyle.borderTopStyle;
log(`"borderTopStyle" = "${elem_borderTopStyle}" / "${comp_borderTopStyle}"'`);

const elem_fontWeight = elementStyle.fontWeight;
const comp_fontWeight = computedStyle.fontWeight;
log(`"fontWeight" = "${elem_fontWeight}" / "${comp_fontWeight}"'`);

Lastly we demonstrate how you can use the dot notation to set a property value. In the following results section you will note that the bottom border of the element is a solid green line.

// Set the bottom border style using dot notation
elementStyle.borderBottom = "5px solid green";

Results

The results are shown below. Note how the values from the corresponding camel case (borderTop) and dash-named (border-top) properties are the same. The local and computed values for the longhand properties are often the same too, except that computed properties use rgb() syntax for colors and additionally include styles set on the parent <div>, such as the font-weight.

Enumerate dash-named style properties

This example demonstrates how to enumerate the dash-named property values of an element, for both the inline and computed style.

HTML

The HTML defines a <div> with a number of styles set, nested within another that sets the font-weight. There are also buttons to get the inline styles and computed styles for the element (and hidden code for a reset button and logging).

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
</div>
<button id="inline_style" type="button">Inline Style</button>
<button id="computed_style" type="button">Computed Style</button>

<button id="reset" type="button">Reset</button>
<pre id="log"></pre>

#log {
  height: 300px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

function clearLog(text) {
  logElement.innerText = "";
}

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  clearLog();
});

JavaScript

The code first defines the function we're going to use to enumerate the properties of our element with the elt ID. This uses CSSStyleDeclaration.getPropertyValue() to get the value of each dash-named property owned by the object that has a numeric index.

function getPopulatedProperties(elementStyles) {
  for (const prop in elementStyles) {
    if (
      // Check the property belongs to the CSSStyleProperties instance
      // Check property has a numeric index (indicates inline/dash-named style)
      Object.hasOwn(elementStyles, prop) &&
      !Number.isNaN(Number.parseInt(prop, 10))
    ) {
      log(
        `${elementStyles[prop]} = '${elementStyles.getPropertyValue(
          elementStyles[prop],
        )}'`,
      );
    }
  }
}

The following code checks and logs whether CSSStyleProperties is defined. If it exists then we create button event handlers to get the inline or computed styles for the element and log their names and values.

if (typeof window.CSSStyleProperties === "undefined") {
  log("CSSStyleProperties is not supported on this browser.");
} else {
  const element = document.querySelector("#elt");

  const inlineStyle = document.querySelector("#inline_style");
  inlineStyle.addEventListener("click", () => {
    clearLog();
    const elementStyle = element.style;
    getPopulatedProperties(elementStyle);
  });

  const computedStyle = document.querySelector("#computed_style");
  computedStyle.addEventListener("click", () => {
    clearLog();
    const compStyles = window.getComputedStyle(element);
    getPopulatedProperties(compStyles);
  });
}

Results

Press the buttons to show the dash-named property names and values for the element's inline and computed styles. Note that the inline styles only include the styles defined on the actual element: all the other properties have the value "" and are not displayed. The computed styles also include font-weight, which is defined on the parent, and many other computed styles.

Specifications

Browser compatibility