DOM (Document Object Model) is a way of manipulating the document (HTML document). This article will deal with how to access and set class names to the DOM elements. In DOM, all HTML elements are defined as objects. We will be using Javascript against CSS to manipulate them.
Following are the properties of Javascript that we will be using to add a class to the DOM element:
-
classList Property: It returns the class name as a DOMTokenList object. It has a method called “add” which is used to add class name to elements.
Syntax:
element.classList.add("className")Example:
html<!DOCTYPE html><html><head><style>.geek {background-color: green;font-size: 50px;}</style></head><body><buttononclick="myClass()">Try it</button><divid="gfg">Geeks for Geeks</div><script>function myClass() {var elem = document.getElementById("gfg");// Adding class to div elementelem.classList.add("geek");}</script></body></html>
Output:
Before clicking the button:After clicking the button:
-
className Property: This property returns the className of the element. If the element has already a class then it will simply add another one to it or else it will append our new class to it.
Syntax:
HTMLElementObject.className
Example:
html<!DOCTYPE html><html><head><style>.geekClass {background-color: green;text-align: center;font-size: 50px;}</style></head><body><divid="gfg">Geeks For Geeks</div><buttononclick="myClassName()">Add Class</button><script>function myClassName() {var element = document.getElementById("gfg");// Adding the class geekClass to element// with id gfg space is given in className// (" geekClass") as if there is already// a class attached to an element than our// new class won't overwrite and will append// one more class to the elementelement.className += " geekClass";}</script></body></html>
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by classList property are listed below:
- Chrome 8+
- Opera 11.5+
- Safari 5.1+
- Edge 10+
- Mozilla Firefox 3.6+