<div id="rose" class="petal leaf">
						I'm feeling so Rosy!
					</div>
				
			

Add a CSS Class

We will add another class called thorn to it. To do so in JavaScript, we need to make use of an element's classList read-only property, which returns the DOMTokenList of the element.

					
						> document.getElementById('rose').classList;
					
				

The DOMTokenList interface has two properties, value and length. For classList, the value property returns a list of class names as a string and the length property gives the number of classes stored in the object.

										
						> document.getElementById('rose').classList.value; //petal leaf
						> document.getElementById('rose').classList.length; //2
					
				

To add one more class to the above <div> element, we just chain the add() method to the element's classList property.

					
						document.getElementById('rose').classList.add('thorn');
					
				

There we already have our newly added class thorn.

					
						> document.getElementById('rose').classList.value; //petal leaf thorn
						> document.getElementById('rose').classList.length; //3;
					
				

If, however, the class name already exists in the <div> element's class attribute, the add() method will ignore it. The following statement will have no effect, as the class petal already exists in the class attribute.

					
						document.getElementById('rose').classList.add('petal');
					
				

Remove a CSS Class

Removing a class from an element requires the use of the remove() method belonging to the classList property of the element.

To remove the recently added class thorn from the <div> element, we just do

					
						document.getElementById('rose').classList.remove('thorn');
					
				

Now if you check the value property of the DOMTokenList interface returned by classList, you will find that only the previous two classes — petal and leaf — remain with it.

					
						document.getElementById('rose').classList.value; //petal leaf
					
				

Adding/ Removing Multiple CSS Classes

Both the add() and remove() methods discussed above can be used for adding and removing multiple classes at a time.

The below statement adds three classes — thorn, bud and sepal — to the <div/> element.

					
						document.getElementById('rose').classList.add('thorn', 'bud', 'sepal');
					
				

On checking in the browser's console, we find them in the DOMTokenList

					
						> document.getElementById('rose').classList;
					
				

And the following one removes them all

					
						document.getElementById('rose').classList.remove('thorn', 'bud', 'sepal');
					
				

Get a Class

We can get the class at the i^th position in the returned collection using the item() method of the classList property of an element. The index starts from 0.

					
						document.getElementById('rose').classList.item(0); // petal
						document.getElementById('rose').classList.item(1); // leaf
					
				

Checking if an Element has a Particular Class with contains()

An element's classList property has the contains() method which returns a Boolean value by checking whether the element has the specified class, the name of which is passed to it as an argument.

					
						document.getElementById('rose').classList.contains('petal'); //true
						document.getElementById('rose').classList.contains('stern'); //false
					
				

Toggle a Class

Using the above contains() method, we can now work out a code to toggle between a class name for an element.

					
						let rose = document.getElementById('rose').classList;
						rose.contains('thorn')? rose.add('thorn'): rose.remove('thorn');
					
				

Often we do such toggle on occurance of some events, like click. Suppose we have a lone <button/> element in our example above. This code toggles the class thorn for the<div/> element on click of it.

						
						let button = document.getElementsByTagName('button');
						button[0].addEventListener('click', () => {
							let rose = document.getElementById('rose').classList;
							!rose.contains('thorn')? rose.add('thorn'): rose.remove('thorn');
						});
					
				

JavaScript acutally has a buit-in method for it: toggle().

						
						let button = document.getElementsByTagName('button');
						button[0].addEventListener('click', () => {						
							document.getElementById('rose').classList.toggle('thorn');
						});