VOOZH about

URL: https://www.geeksforgeeks.org/html/html-dom-classname-property/

⇱ HTML DOM className Property - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

HTML DOM className Property

Last Updated : 13 Jun, 2023

In the HTML document, the className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an element to the desired class. 

Syntax:

  • returns the className property
HTMLElementObject.className;
  • sets the className property
HTMLElementObject.className = class;

The className specifies the class name of an element. To apply multiple classes, separate them using spaces. As an example, if an element has two classes then we specify them as "classname1 classname2" where classname1 and classname2 are the names of two different classes. The className property returns a string or a space-separated list of classes of an element. 

Example-1: This example set the class for <div> element. 

Output: Before Click on The Button:

πŸ‘ Image
Initially

After Click on The Button:

πŸ‘ Image
After clicking try it button
  • Explanation: The class for < div> element is assigned a value using className property.

Example-2: This example get the classes of < div> element. 

Output: Before Click on The Button:

πŸ‘ Image
Initially

After Click on The Button:

πŸ‘ Image
After pressing try it button

Example-3: This example overwrites the existing class names. 

Output: Before Click on The Button:

πŸ‘ Image
Initially

After Click on The Button:

πŸ‘ Image
After pressing try it

Supported Browsers:

  • Google Chrome 22 and above
  • Edge 12 and above
  • Internet Explorer 5 and above
  • Firefox 1 and above
  • Opera 8 and above
  • Safari 1 and above
Comment