Skip to content

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.

→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about js: