HTML - DOM className Property

Quiz

The HTML DOM className property is used to access or modify (change) the value of the class attribute of an element, represented as a space-separated string.

Syntax

Following is the syntax of the HTML DOM className (to set the class name) property −

element.className = class_name;

To retrieve the class name property, use the following syntax −

element.className;

Where, class_name is a class name you want to apply to the element. For multiple classes, separate them with spaces in the string.

Parameters

Since, it is a property it does not accept any parameter.

Return Value

This property returns a string that includes all the classes assigned to the element, with each class separated by spaces.

Example 1: Applying styles with className

The following example demonstrates the usage of the HTML DOM className property. It applies multiple CSS classes to an HTML element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       color: green;
       font-weight: bold;
       font-style: italic;
   }
</style>
</head>
<body>
<p>Click the below button to style with className...</p>  
<p id="ex">A paragraph with default styling.</p>
<button onclick="applyStyles()">Apply Styles</button> 
<script>
   var paraElement = document.getElementById("ex"); 
   function applyStyles() { 
      paraElement.className = "highlight"; 
   }
</script>
</body>
</html>

Example 2: Switching Styles of a Div Element

Here is another example of using the HTML DOM className property. We use this property to add a class name to a <div> element and use that class name in CSS to style it −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: pink;
       color: blue;
       padding: 10px;
       border: 1px solid black;
   }
   .italic {
       font-style: italic;
   }
</style>
</head>
<body>
<p>Click the below button to style with className...</p>  
<button onclick="toggleStyles()">Toggle Styles</button>
<br><br>
<div id="ex" class="highlight">This is a div with default styling.</div>
<script>
   function toggleStyles() {
      var divElement = document.getElementById("ex");
      divElement.classList.toggle("italic");
   }
</script>
</body>
</html>

Example 3: Retrieving the Class Attribute of an Element

The example below shows how to use the className property to access and display the class attribute of an HTML element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title> 
<style>
   .highlight {
       background-color: AquaMarine;
       color: blue;
       padding: 10px;
       font-style: italic;
   }
</style>
</head>
<body>
<div id="myDIV" class="highlight italic">This is a div with classes "highlight" and "italic".</div>
<br>
<button onclick="getClassAttribute()">Get Class Attribute</button>
<p id="cl"></p>
<script>
   function getClassAttribute() {
      var divEle = document.getElementById("myDIV");
      var clat = divEle.getAttribute("class");
      document.getElementById("cl").textContent = "Class attribute value: " + clat;
   }
</script>
</body>
</html>

Example 4: Retrieving Class Attribute with Multiple Classes

This example shows how to get the class attribute of an element with multiple classes using the className property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: yellow;
   }
   .italic {
       font-style: italic;
   }
   .bold {
       font-weight: bold;
   }
</style>
</head>
<body>
<p>Retrieves the class attribute of an element with multiple classes.</p>    
<div id="myDiv" class="highlight italic bold">Sample Div Element</div>
<br>
<button onclick="getClassAttribute()">Get Class Attribute</button>
<p id="Res"></p>
<script>
   function getClassAttribute() {
      const ele = document.getElementById('myDiv');
      const classAttr = ele.className;
      document.getElementById('Res').textContent = `Class Attribute: ${classAttr}`;
   }
</script>
</body>
</html>

Example 5: Switching between Multiple classes

This example shows us how we can make use of the className property when switching between multiple CSS classes to style a particular paragraph (<p>) element in different ways −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title> 
<style>
   .highlight {
       background-color: lightpink;
   }
   .large {
       font-size: 24px;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>Click the below button to toggle between the classes</p>
<p id="myPara" class="highlight">I am a default paragraph with default styling.!!</p>
<button onclick="toggleClass()">Toggle Classes</button>
<script>
   function toggleClass() {
      const para=document.getElementById('myPara');
      if (para.classList.contains('highlight')) {
         para.className = 'large';  
      } else if (para.classList.contains('large')){
         para.className = 'underline';
      } else {
         para.className = 'highlight';
      }
   }
</script>
</body>
</html>

Example 6: Overwriting Class Attribute

The following example overwrites the existing class attribute with the new one with the help of the className property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .blue {
       color: blue;
   }
   .red {
       color: red;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>Click the buttons to apply different class attributes to this paragraph:</p>
<p id="my" class="blue">This paragraph has the class "blue".</p>
<button onclick="applyClass('red')">Apply Red Class</button>
<button onclick="applyClass('underline')">Apply Underline Class</button>
<script>
   function applyClass(newClass) {
      const para = document.getElementById('my');
      para.className = newClass;
   }
</script>
</body>
</html>

Example 7: Adding Classes Without Overwriting

This example shows the use of the className property. The following code includes two buttons to add a highlight and an underline to the paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: yellow;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body> 
<p>Click the buttons to toggle between adding classes to this paragraph:</p>
<p id="myP" class="highlight">This paragraph has the class "highlight".</p>
<button onclick="addClass('underline')">Add Underline Class</button>
<button onclick="addClass('highlight')">Toggle Highlight Class</button>
<script>
function addClass(newClass) {
   const para=document.getElementById('myP');         
   // Check if the class is already present
   if (!para.classList.contains(newClass)) {
      // Append class without overwriting 
      para.className += ' ' + newClass;
   } else {
      para.classList.remove(newClass);
      }
   }
</script>
</body>
</html>

Supported Browsers

Property
className	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page