Published Jan 21 2019
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
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'
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.
I wrote an entire book on this topic 👇
I also got a super cool course 👇