How to add and remove classes with vanilla JS

The Element.classList API provides methods that you can use to add(), remove(), toggle() and check if an element contains() a class or classes.
let elem = document.querySelector(‘#sandwich’); // Add the .turkey class elem.classList.add(‘turkey’); // Remove the .tuna class elem.classList.remove(‘tuna’); // Toggle the .tomato class on or off // (Add the class if it’s not already on the element, remove it if it is.) elem.classList.toggle(‘tomato’); // Check if an element has the .


This content originally appeared on Go Make Things and was authored by Go Make Things

The Element.classList API provides methods that you can use to add(), remove(), toggle() and check if an element contains() a class or classes.

let elem = document.querySelector('#sandwich');

// Add the .turkey class
elem.classList.add('turkey');

// Remove the .tuna class
elem.classList.remove('tuna');

// Toggle the .tomato class on or off
// (Add the class if it's not already on the element, remove it if it is.)
elem.classList.toggle('tomato');

// Check if an element has the .mayo class
if (elem.classList.contains('mayo')) {
	console.log('add mayo!');
}

Here’s a demo.

One lesser known feature of the Element.classList API is that you can also use it to add or remove multiple classes from element. Pass the classes to add or remove into the respective method as a comma separated list.

// Add the .turkey and .mayo classes
elem.classList.add('turkey', 'mayo');

// Remove the .tuna and .tomato classes
elem.classList.remove('tuna', 'tomato');

Here’s another demo.

If you have an array of classes, you can use array destructuring to pass in all of the classes as individual items.

let classNames = ['turkey', 'mayo'];
elem.classList.add(...classNames);

Here’s one last demo.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2021-04-19T14:30:00+00:00) How to add and remove classes with vanilla JS. Retrieved from https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/

MLA
" » How to add and remove classes with vanilla JS." Go Make Things | Sciencx - Monday April 19, 2021, https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/
HARVARD
Go Make Things | Sciencx Monday April 19, 2021 » How to add and remove classes with vanilla JS., viewed ,<https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » How to add and remove classes with vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/
CHICAGO
" » How to add and remove classes with vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/
IEEE
" » How to add and remove classes with vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/. [Accessed: ]
rf:citation
» How to add and remove classes with vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/04/19/how-to-add-and-remove-classes-with-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts