How to style DOM elements using JavaScript

The ways you can apply styling to elements on the page, dynamically, using plain JavaScript

You might have the need to dynamically apply CSS properties to DOM elements.

What are the APIs browser expose to do that?

First, one of the cleanest ways is to add or remove classes from an element, and use classes styling in your CSS.

const element = document.querySelector('#my-element')

You can use the classList property of an element and its add() and remove() methods:

element.classList.add('myclass')
element.classList.remove('myclass')

You can also directly change each CSS property of an element by using the style property, which references the element inline styles.

For example you can change an element color using

element.style.color = '#fff'

You can alter the border:

element.style.border = '1px solid black'

You saw color and border. You can change all the CSS properties, by using camelCase instead of dashes when the CSS property name contains them.

A translation table is conveniently listed in this MDN page.