SVGElement: style property

Value

A live CSSStyleProperties object.

Description

The values of the inline styles set in the element's style attribute are reflected by corresponding properties of the returned CSSStyleProperties object.

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.

The style property is read-only, meaning it is not possible to assign a CSSStyleProperties object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the property. In this case the string can be read from cssText. Using style in this manner will completely overwrite all inline styles on the element.

To add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleProperties object. For example, you can write element.style.backgroundColor = "red". A style declaration is reset by setting it to null or an empty string, e.g., element.style.color = null.

The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.

Examples

Enumerating style information

This example demonstrates how we can enumerate the dash-named properties of CSSStyleProperties.

HTML

<svg
  xmlns="https://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="log"></pre>

#log {
  height: 70px;
  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;
}

The following code iterates the enumerable properties of the CSSStyleProperties and logs the result.

const element = document.querySelector("circle");
const elementStyle = element.style;
// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // Check the property belongs to the CSSStyleProperties instance
  // Ensure the property is a numeric index (indicating a dash-named/inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
    );
  }
}

Results

The result is shown below. Note that only the element's longhand CSS properties are enumerated values (the inline shorthand property is not enumerated).

Specifications

Browser compatibility

See also

• Using dynamic styling information
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap