Javascript class manipulation

2:29 AM 8/26/2018

I use this frequently in all of my projects and so that's the main reason it is now on this page.

Class manipulation includes checking existence of a class of an element, adding one to it and then class removal.

Let us pick a <label> HTML element (shown below) to test, with a set of manipulator buttons alongside:

Source

To check for a class red of the label:

if(label.className.search(/\bred\b/) !== -1){
	//do something if it is red
}
			

To add a class red to the label:

if(label.className.search(/\bred\b/) === -1)
	label.className = label.className.trim() + ' red';
			

To remove red class from the label:

label.className = label.className.replace(/\bred\b/g, '');
			

Comments