How To Change The ClassName Using JavaScript

It is possible to redefine the CSS property of any HTML element with changing ClassName using JavaScript. A JavaScript function can assign, remove or replace the name of the class of any HTML element. Following are the different methods of changing the className.

Changing 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 dashed border.

Changing The ClassName To Show/Hide HTML Element


You can show or hide any HTML element with changing className of the 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.

Changing The ClassName With Timer


You can change the className of any HTML element using JavaScript function with timer instead of 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>

Preview:


Hide Paragraph With Timer

This paragraph will automatically hides after 9 sec when the page loads.