HTMLElement: style property
===========================

The read-only **`style`** property of the `HTMLElement` 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` becomes `backgroundAttachment`.
* The property `float`, being a reserved JavaScript keyword, is converted to `cssFloat`.

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 values obtained using the element's `style` property relates to the style set on the HTML attribute:


```html
<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>
```



```js
const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all styles (for…of doesn't work with CSSStyleDeclaration)
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
 elementStyle[prop]
 } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}
```


Note `font-weight` is not listed as a value for `elementStyle` as it is not defined within the `style` attribute of the element itself. Rather, it is inherited from the definition on its parent. Also note that the shorthand `border-top` property, defined in the `style` attribute, is not listed directly. Rather, it is replaced by the three corresponding longhand properties (`border-top-color`, `border-top-style`, and `border-top-width`).

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using dynamic styling information
* `SVGElement.style`