HTMLElement: style property

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The read-onlystyle property of theHTMLElement returns theinline style of an element in the form of a liveCSSStyleDeclaration 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 inlinestyle attribute.

Shorthand properties are expanded. If you setstyle="border-top: 1px solid black", the longhand properties (border-top-color,border-top-style, andborder-top-width) are set instead.

This property is read-only, meaning it is not possible to assign aCSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning astring directly to thestyle property. In this case the string is forwarded toCSSStyleDeclaration.cssText. Usingstyle 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 theCSSStyleDeclaration object. For example, you can writeelement.style.backgroundColor = "red".

A style declaration is reset by setting it tonull 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). Asfloat is a reserved keyword in JavaScript, this property name was historically converted tocssFloat. All modern browsers now support the direct use offloat in JavaScript to access thefloat CSS property, butcssFloat is used in older browsers and is still supported as an alias in modern browsers.
If the property is made of several words, separated by dashes, the dashes are removed and it is converted tocamel case:background-attachment becomesbackgroundAttachment.

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

Value

A liveCSSStyleDeclaration object.

Examples

Getting style information

The following code snippet demonstrates how the values obtained using the element'sstyle property relates to the style set on the HTML attribute:

html

<div>  <div>    An example div  </div>  <pre></pre></div>

const element = document.getElementById("elt");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, 10))  ) {    out.textContent += `${      elementStyle[prop]    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;  }}

Notefont-weight is not listed as a value forelementStyle as it is not defined within thestyle attribute of the element itself. Rather, it is inherited from the definition on its parent. Also note that the shorthandborder-top property, defined in thestyle attribute, is not listed directly. Rather, it is replaced by the three corresponding longhand properties (border-top-color,border-top-style, andborder-top-width).