HTMLElement.
An object of styles set directly on an element (inline), for reading and changing individual CSS properties.
- Returns
- A
CSSStyleDeclarationobject with the element’s inline styles.
Example
#const bar = document.querySelector('#bar')
bar.style.width = '65%'
bar.style.backgroundColor = 'orange'
console.log(bar.style.width)
console.log(bar.style.backgroundColor)
console.log(bar.style.height)Definition and usage
#The style property gives you access to the styles stored in the element’s style attribute. Every CSS property has a camelCase counterpart here: background-color is style.backgroundColor, and font-size is style.fontSize. You set values as strings, always with a unit, e.g. "200px".
style only shows inline styles. You won’t see rules from stylesheets in it, so reading style.color for an element styled by a class returns an empty string. To read the actual, computed appearance, use the getComputedStyle(element) function.
You can set CSS variables (e.g. --accent) with the style.setProperty("--accent", "#7c3aed") method, and remove a style by assigning an empty string or calling removeProperty(). For bigger visual changes, it’s better to toggle classes through classList, and leave style for values computed on the fly, such as the position or width of a progress bar.
Syntax
#element.style.propertyName = value
element.style.setProperty(name, value)
element.style.removeProperty(name)
getComputedStyle(element).propertyNameMore examples
#const title = document.querySelector('#title')
console.log(title.style.color === '')
console.log(getComputedStyle(title).color)
console.log(getComputedStyle(title).fontSize)const box = document.querySelector('#box')
box.style.setProperty('--accent', '#0ea5e9')
console.log(box.style.getPropertyValue('--accent'))
box.style.width = 120
console.log(box.style.width === '')
box.style.width = '120px'
console.log(box.style.width)Assigning the plain number 120 is ignored, since CSS requires a unit for width. Only the string "120px" changes the style.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Always include a unit:
style.width = "120px". A plain number is ignored. - To read styles from stylesheets, use
getComputedStyle(element), sincestyleonly sees inline values. - Describe bigger visual changes in CSS as a class, and toggle it through
classList.
Related entries
#- Element.classListAn object for adding, removing, toggling, and checking an element’s CSS classes.
- getComputedStyle()Returns an element’s computed styles, meaning the CSS values the browser actually applied after taking every rule into account.
- Element.setAttribute()Sets the value of an element’s HTML attribute, or adds a new attribute.
- document.querySelector()Returns the first element that matches a CSS selector, or null when nothing matches.
- Template literalsText templates in backticks: insert values with ${} and span multiple lines.
Spotted a mistake or missing an example? Write to us.