How to style DOM elements using JavaScript

Jan 21, 2019

Learn how to style DOM elements with JavaScript, using classList to add and remove classes or the style property to set inline CSS like color and border.

~~~

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.

Tagged: JavaScript · All topics

~~~