Skip to main content Accessibility Feedback

The property in vanilla JS

The property is supposed to be a read-only property that returns a CSSStyleDeclaration object: an array of inline style properties the element has, as well as a key/value pair mapping of all available styles you could get or set.

<p id="app" style="background-color: rebeccapurple; color: white;">
	Hello, world!
let app = document.querySelector('#app');

// ["background-color", "color"]
let inlineStyles =;

But, you’re not supposed to set styles using the property directly.

// DON'T do this = 'font-size: 2em; font-weight: bold;';

I’ve found most browsers will actually let you do it, but it’s not how the property is supposed to work. Instead, you can set individual properties on the property directly, using a camel-case format.

(_You can find a full list of css-properties and their JS equivalents on MDN._)

// Add styles for font-size and font-weight = '2em'; = 'bold';

But, this weekend, I learned that there’s actually an property that works like Element.className, but for inline styles.

You can use it as a getter or setter property.

As a getter, it returns a string with all of the inline styles on an element. When using it to set properties, it will replace all of the styles on the element with whatever you use. It also lets you author styles the way you would plain old CSS.

// returns "background-color: rebeccapurple; color: white;"
let styles =;

// Wipes out the existing styles and replaces them with this = 'font-size: 2em; font-weight: bold;';

// Appends the existing styles with more += 'color: rebeccapurple;';

Here’s a demo.

If you need more fine-grained control, targeting individual properties is still a good idea. But if you want easily swap out all of the styles on an element, is quite useful!