How To Change The ClassName Using JavaScript

You can change the ClassName to redefine the CSS property of any HTML element using JavaScript. A JavaScript function can assign, remove, or replace the name of the class of any HTML element. The following are the different methods of changing the className.

Table of Contents

How to Change The ClassName To Change The CSS Style

Here is an example where the style of an element toggles between by setting the element’s className property alternatively to an existing style sheet class selector name and an empty string. When you set the className to an empty string, the default behavior of the <div> element changes.

A click of the button forces the style sheet rule to override the default behavior in the <div> element. Following is the JavaScript code with a function named “toggleClass” which changes the className of any element having id attribute “elemID” to special if there is no className defined on element.

<script language="javascript">
function toggleClass(elemID) {
var elem = (document.all) ? document.all(elemID) :
document.getElementById(elemID)
if (elem.className == "") {
elem.className = "special"
} else {
elem.className = ""
}}
</script>

The full HTML code along with the above JavaScript code is given below.

<html><body>
<style type="text/css">
.special {
font-size:14pt; 
color:red;
border:2px dashed green;
margin:30px;
padding:5px;
}
</style>
<script>
function toggleClass(elemID) {
var elem = (document.all) ? document.all(elemID) :
document.getElementById(elemID)
if (elem.className == "") {
elem.className = "special"
} else {
elem.className = ""
}
}
</script>
<form name="input">
<input type="button" value="Toggle Class Name"
onClick="toggleClass('div1')">
</form>
<br/>
<div id="div1">
<H4>Change ClassName</H4>
<P>When you click on the toggle button, the CSS style of this paragraph changes to red text and green dasshed border. </P></div>
</body>
</html>

Preview of the above HTML code, where CSS style of the given paragraph changes while toggle button was pressed, given below.

Change ClassName

When you click on the toggle button, the CSS style of this paragraph changes to red text and green dasshed border.

How to Change The ClassName To Show/Hide HTML Element

You can change the className of the element to show or hide any HTML element with specifying elements CSS display property to “none” as the CSS and JavaScript code given below.

CSS Code:

<style type="text/css">
.hide {
display:none;
}
</style>

JavaScript Code:

<script>
function hideElem() {
var elem2 = document.getElementById("div2");
if (elem2.className == "special") {
elem2.className = "hide"
} else {
elem2.className = "special"
}
}
</script>

HTML Code:

<input type="button" value="Show/Hide This Paragraph"
onClick="hideElem()">
<div id="div2" class="special">
<H4>Show/Hide Paragraph</H4>
<P>When you click on the toggle button, the paragraph will show or hide. </P></div>

Preview:

Show/Hide Paragraph

When you click on the toggle button, the paragraph will show or hide.

How to Change The ClassName With Timer

You can change the className of any HTML element using a JavaScript function with a timer instead of a button click as given below.

JavaScript Code:

<script>
function phide() {
var elem3 = document.getElementById("div3");
elem3.className = "hide"
}
t=setTimeout("phide()",9000);
</script>

HTML Code:

<div id="div3" class="special">
<H4>Hide Paragraph With Timer</H4>
<P>This paragraph will automatically hides after 9 sec when the page loads.</P></div>