change element class property

How to Change Element Class Property Using JavaScript

JavaScript allows you to dynamically add, remove, modify and even check class names of a page’s DOM elements. In this article, we will learn how to change element class Property using JavaScript.


How to Change Element Class Property Using JavaScript

Let us say you have an element with ID=MyElement. Modern browsers allow you to easily change class property using classlist property, available starting HTML5. It allows you to change class names without using third-party JS library. Now let us look at several common use cases with regards to changing class names.


Change All Class Names

Sometimes DOM element may contain multiple class names such as class=”data project”. If you want to change all the class names of a DOM element at one go, you can do so using className property.

document.getElementById("MyElement").className = "MyClass";

The above command will change the class attribute of element with ID=MyElement to MyClass. If you want to assign multiple class names, you can specify it in space-separated format. Here is an example to set multiple classes to your DOM element.

document.getElementById("MyElement").className = "MyClass YourClass";


Add Additional Class to Element

If you want to add additional class to element you can do so using += operator on className property. Here is an example to append class ‘AnyClass’ to your element with ID MyElement.

document.getElementById("MyElement").className += "AnyClass";

Alternatively, you can also use add() function in classList property of the element.

document.getElementById("MyElement").classList.add('AnyClass');

If you use JQuery in your website, you can easily use its addClass() method to add class name to your element. We use ‘#MyElement’ selector to identify the element and call addClass to it. Here is the example to add class name AnyClass to your element.

$('#MyElement').addClass('AnyClass');

If you want to add multiple class names to your element, you can provide them in a space separated manner. Here is an example to add 2 class names AnyClass and MyClass to your element.

$('#MyElement').addClass('MyClass AnyClass');


Remove Class to Element

If you want to remove class for element you will need to find and replace it with empty string as shown below. You can use replace() function available for className attribute of DOM element. Here is an example to remove class ‘AnyClass’ for element with ID=MyElement.

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)AnyClass(?!\S)/g , '' )

Here is the explanation of regular expression used above for matching classname.

(?:^|\s) # Match the start of the string or any single whitespace character

AnyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

Alternatively, you can also use remove() function available with classlist property.

document.getElementById("MyElement").classList.remove('AnyClass');

If you use JQuery, you can use remove() function available in it, to remove one or more class names. Here is an example to remove AnyClass class name from element.

$('#MyElement').removeClass('AnyClass');

If you want to remove multiple class names in a single command, mention them one after the other in a space separated manner.

$('#MyElement').removeClass('MyClass AnyClass');


Check if Class Name Exists

If you want to check if a class name exists for a given DOM with ID=MyElement, you can use contains() function available in classlist property of element.

document.getElementById("MyElement").classList.contains('AnyClass')

The above function returns True if the class name exists for your DOM element, and returns False if it doesn’t exist.

Alternatively, you can also use regular expression to match your class name. You can use match function available for className attribute of your DOM element.

document.getElementById("MyElement").className.match(/(?:^|\s)AnyClass(?!\S)/)

If you want to check if a class name exists for an element, use hasClass() function.

$('#MyElement').hasClass('MyClass');

The above function returns True if the specified class exists for the element, else it returns False.

In this article, we have learnt several simple ways to add, remove, modify class names in JavaScript as well as JQuery. If you want to use JavaScript for this purpose, use the classList property’s functions to change class names. It is also advisable to use JQuery for this purpose.

Also read:

How to Get Value of Data Attribute in JavaScript
How to Shuffle Array in JavaScript
How to Remove Local Time Zone from Date in JavaScript
How to Format Date to MMDDYYYY in JavaScript
How to Copy to Clipboard in JavaScript

Leave a Reply

Your email address will not be published.