Yes, you can change CSS with JavaScript, but it’s better to use classes to let CSS handle CSS tasks.
To add a class, use the add method within the classList property:
Element.classList.add('className')Example:
<p>This is a paragraph of test</p>
const p = document.querySelector("p")p.classList.add("red")To add multiple classes, pass additional arguments:
Element.classList.add("firstClass", "secondClass", "thirdClass")To remove a class, use the remove method:
Element.classList.remove('className')To check if a class exists, use the contains method:
Element.classList.contains('className')Example:
const div = document.querySelector('div')if (div.classList.contains('superpower')) { // Do something if the div has the class '.superpower'k}To toggle a class, use the toggle method:
Element.classList.toggle('red')Summary
- Add a class:
Element.classList.add('className') - Add multiple classes:
Element.classList.add('firstClass', 'secondClass' - Remove a class:
Element.classList.remove('className') - Remove multiple classes:
Element.classList.remove('firstClass', 'secondClass') - Check if a class exists:
Element.classList.contains('className') - Toggle a class:
Element.classList.toggle('className')