SVGElement: style property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The read-only style
property of the SVGElement
returns the inline style of an element in the form of a live CSSStyleDeclaration
object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element's inline style
attribute.
Shorthand properties are expanded. If you set style="border-top: 1px solid black"
, the longhand properties (border-top-color
, border-top-style
, and border-top-width
) are set instead.
This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration
object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style
property. In this case the string is forwarded to CSSStyleDeclaration.cssText
. Using style
in this manner will completely overwrite all inline styles on the element.
Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration
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., elt.style.color = null
.
Note: CSS property names are converted to JavaScript identifier with these rules:
- If the property is made of one word, it remains as it is:
height
stays as is (in lowercase). - If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camel case:
background-attachment
becomesbackgroundAttachment
. - The property
float
, being a reserved JavaScript keyword, is converted tocssFloat
.
The style
property has the same priority in the CSS cascade as an inline style declaration set via the style
attribute.
Value
A live CSSStyleDeclaration
object.
Examples
Getting style information
The following code snippet demonstrates how the style
attribute is translated into a list of entries in CSSStyleDeclaration
:
<svg
width="50"
height="50"
xmlns="http://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="out"></pre>
const element = document.querySelector("circle");
const out = document.getElementById("out");
const elementStyle = element.style;
// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
// We check if the property belongs to the CSSStyleDeclaration instance
// We also ensure that the property is a numeric index (indicating an inline style)
if (
Object.hasOwn(elementStyle, prop) &&
!Number.isNaN(Number.parseInt(prop))
) {
out.textContent += `${
elementStyle[prop]
} = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
}
}
Specifications
Specification |
---|
CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |
Browser compatibility
BCD tables only load in the browser