yle - Web APIs | MDN

• Skip to main content
• Skip to search

HTMLElement: 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 ⁨July 2015⁩.

• Learn more
• See full compatibility
• Report feedback

The read-only style property of the HTMLElement interface returns the inline style of an element in the form of a live CSSStyleProperties object. This object can be used to get and set the inline styles of an element.

In this article

• Value
• Description
• Examples
• Specifications
• Browser compatibility
• See also

Value

A live CSSStyleProperties object.

Note: Earlier versions of the specification returned a CSSStyleDeclaration (from which CSSStyleProperties is derived). See the browser compatibility table for browser support information.

Although the style property itself is read-only in the sense that you can't replace the CSSStyleProperties object, you can still assign to the style property directly, which is equivalent to assigning to its cssText property. You can also modify the CSSStyleProperties object using the setProperty() and removeProperty() methods.

Description

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

Note: CSSStyleProperties has dash-named and corresponding camel-case named properties for all CSS properties supported by the browser (not just those with inline styles). Properties that don't have a corresponding inline style are set to "".

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.

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

Basic usage

This code example shows how you can read the inline styles of an element. In each case it reads the dash-named style properties using getPropertyValue() and gets the camel case properties using the dot operator.

HTML

First we define a <div> element and nested element that define different inline styles, using both shorthand and longhand form.

html<div style="font-weight: bold;"> <div style="border-top: 1px solid blue; color: red;" id="elt"> An example div </div> <pre id="log"></pre> </div> #log { height: 200px; 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 gets the inner element, reads its style, and logs the dash-named and camel-case named CSS style properties.

jsconst element = document.getElementById("elt"); const elementStyle = element.style; // Longhand styles log(`"border-top" = '${elementStyle.getPropertyValue("border-top")}'`); log(`"borderTop" = '${elementStyle.borderTop}'`); // Expanded longhand styles log( `"border-top-width" = '${elementStyle.getPropertyValue("border-top-width")}'`, ); log(`"borderTopWidth" = '${elementStyle.borderTopWidth}'`); log( `"border-top-style" = '${elementStyle.getPropertyValue("border-top-style")}'`, ); log(`"borderTopStyle" = '${elementStyle.borderTopStyle}'`); log( `"border-top-color" = '${elementStyle.getPropertyValue("border-top-color")}'`, ); log(`"borderTopColor" = '${elementStyle.borderTopColor}'`); // Original shorthand style log(`"color" = '${elementStyle.getPropertyValue("color")}'`); log(`"color" = '${elementStyle.color}'`); // Defined on parent log(`"font-weight" = '${elementStyle.getPropertyValue("font-weight")}'`); log(`"fontWeight" = '${elementStyle.fontWeight}'`);

Results

The result is shown below. In each case we see that the styles read using the dash and camel-case named properties are the same. We also see that the border-top property corresponding to the element's style attribute is present, and that a longhand property is defined for each of its parts (border-top-color, border-top-style, and border-top-width).

Note that font-weight is defined on the CSSStyleProperties (as are all other CSS properties, though we have not logged them). However it is not an inline style for the nested element, so its value is set to the empty string ("").

Enumerating style information

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

HTML

First we define a <div> element and nested element that define different inline styles, using both shorthand and longhand form. This is the same HTML as in the previous example.

html<div style="font-weight: bold;"> <div style="border-top: 1px solid blue; color: red;" id="elt"> An example div </div> <pre id="log"></pre> </div> #log { height: 100px; 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.

jsconst element = document.getElementById("elt"); 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).

Updating border style

html<div id="box"></div> <form name="FormName"> <button id="btn1">Make border 20px-wide</button> <button id="btn2">Make border 5px-wide</button> </form> css#box { border: 5px solid green; width: 100px; height: 100px; } jsfunction setBorderWidth(width) { document.getElementById("box").style.borderWidth = `${width}px`; } document.getElementById("btn1").addEventListener("click", () => { setBorderWidth(20); }); document.getElementById("btn2").addEventListener("click", () => { setBorderWidth(5); });

Manipulating styles

In this example, some basic style properties of an HTML paragraph element are accessed using the style object on the element and that object's CSS style properties, which can be retrieved and set from the DOM. In this case, you are manipulating the individual styles directly. You can also use styleSheets and their rules to change styles for whole documents.

html<p id="pid">Some text</p> <form> <p><button type="button">Change text</button></p> </form> jsfunction changeText() { const p = document.getElementById("pid"); p.style.color = "blue"; p.style.fontSize = "18pt"; } document.querySelector("button").addEventListener("click", () => { changeText(); });

Specifications

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

Browser compatibility

See also

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

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Nov 25, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. CSS Object Model (CSSOM)
2. HTMLElement
3. Instance properties
   1. accessKey
   2. accessKeyLabel
   3. anchorElement Experimental Non-standard
   4. attributeStyleMap
   5. autocapitalize
   6. autocorrect
   7. autofocus
   8. contentEditable
   9. dataset
   10. dir
   11. draggable
   12. editContext Experimental
   13. enterKeyHint
   14. hidden
   15. inert
   16. innerText
   17. inputMode
   18. isContentEditable
   19. lang
   20. nonce
   21. offsetHeight
   22. offsetLeft
   23. offsetParent
   24. offsetTop
   25. offsetWidth
   26. outerText
   27. popover
   28. spellcheck
   29. style
   30. tabIndex
   31. title
   32. translate
   33. virtualKeyboardPolicy Experimental
   34. writingSuggestions
4. Instance methods
   1. attachInternals()
   2. blur()
   3. click()
   4. focus()
   5. hidePopover()
   6. showPopover()
   7. togglePopover()
5. Events
   1. beforetoggle
   2. change
   3. command
   4. drag
   5. dragend
   6. dragenter
   7. dragleave
   8. dragover
   9. dragstart
   10. drop
   11. error
   12. interest Experimental Non-standard
   13. load
   14. loseinterest Experimental Non-standard
   15. toggle
6. Inheritance
   1. Element
   2. Node
   3. EventTarget
7. Related pages for CSSOM
   1. CSS
   2. CSSConditionRule
   3. CSSFontFeatureValuesRule
   4. CSSFontPaletteValuesRule
   5. CSSFunctionDeclarations Experimental
   6. CSSFunctionDescriptors Experimental
   7. CSSFunctionRule Experimental
   8. CSSGroupingRule
   9. CSSImportRule
   10. CSSKeyframeRule
   11. CSSKeyframesRule
   12. CSSLayerBlockRule
   13. CSSLayerStatementRule
   14. CSSMediaRule
   15. CSSNamespaceRule
   16. CSSPageDescriptors
   17. CSSPageRule
   18. CSSPropertyRule
   19. CSSRule
   20. CSSRuleList
   21. CSSStartingStyleRule
   22. CSSStyleDeclaration
   23. CSSStyleProperties
   24. CSSStyleRule
   25. CSSStyleSheet
   26. CSSSupportsRule
   27. CaretPosition
   28. MediaList
   29. MediaQueryList
   30. Screen
   31. StyleSheet
   32. StyleSheetList
8. Guides
   1. CSS Declaration
   2. CSS Declaration Block
   3. Determining the dimensions of elements
   4. Managing screen orientation
   5. Using dynamic styling information
   6. CSS value serialization