[Edit]

JavaScript - add, remove, get and check element class name

1 contributors

2 contributions

0 discussions

2 points

Created by:

Savannah

559

In this article, we want to show a simple summary of the operations on the classList property located inside the element. The class list lets to add single class names into elements under JavaScript.

Note:

The element can have only unique class names like Set does.

	Operation	Description
1	add	With `classList.add()` we are able to add a single class name to element classes. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.add('layout'); 10 element.classList.add('visible'); 11 12 console.log(element.outerHTML); 13 14 </script> 15 </body> 16 </html> Auto running
2	get	By default `classList.get()` function is not available. Go to below `classList.contains()` function description to find an alternative.
3	set	When `classList.toggle()` is used with two parameters work like `set()` method: adding class name when the second parameter is `true`, e.g. `classList.toggle('class-name', true)` removing class name when the second parameter is `false`, e.g. `classList.toggle('class-name', false)` xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.toggle('visible', true); 10 element.classList.toggle('shadow', true); 11 element.classList.toggle('border', false); 12 13 console.log(element.outerHTML); 14 15 </script> 16 </body> 17 </html> Auto running
4	remove	With `classList.remove()` we are able to remove a single class name from element classes. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border shadow">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.remove('border'); 10 element.classList.remove('shadow'); 11 12 console.log(element.outerHTML); 13 14 </script> 15 </body> 16 </html> Auto running
5	replace	With `classList.replace()` we are able to replace a single class name from element classes with a new one. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.replace('border', 'shadow'); 10 11 console.log(element.outerHTML); 12 13 </script> 14 </body> 15 </html> Auto running
6	toggle	When `classList.toggle()` is used with a single parameter: removes class name if already exists in the element, adds class name in another case. In other words, we can say: the `classList.toggle()` method works like a switch. When `classList.toggle()` added class name it returns `true`, in other cases `false` (when removed class name). xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.toggle('shadow'); 10 element.classList.toggle('border'); 11 12 console.log(element.outerHTML); 13 14 </script> 15 </body> 16 </html> Auto running Note: Go to the 3. set example to see the `toggle()` with two arguments.
7	contains	With `classList.contains()` we are able to check if the element's `classList` contains the given class name. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 console.log(element.classList.contains('border')); // true 10 console.log(element.classList.contains('shadow')); // false 11 12 </script> 13 </body> 14 </html> Auto running
8	clear	With `classList.contains()` we are able to check if the element's `classList` contains the given class name. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border shadow">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.className = ''; 10 11 console.log(element.outerHTML); 12 13 </script> 14 </body> 15 </html> Auto running
9	iterating	In the example below, we use `forEach()` method to iterate and display class names from the element's `classList`. xxxxxxxxxx 1 <!doctype html> 2 <html> 3 <body> 4 <div id="element" class="border shadow">Some content here ...</div> 5 <script> 6 7 var element = document.querySelector('#element'); 8 9 element.classList.forEach(function(className) { 10 console.log(className); 11 }); 12 13 </script> 14 </body> 15 </html> Auto running

Alternative titles

Show discussions ...

JavaScript - add, remove, get and check element class name

Alternative titles

Native Advertising

🚀

Dirask - we help you to

solve coding problems.

Ask question.

❤️💻 🙂