Web Designing Tutorials

How To Change The ClassName Using JavaScript

Pinterest LinkedIn Tumblr
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.

Read Also: How To Handle Drag and Drop Event In JavaScript

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>

Preview:

Hide Paragraph With Timer

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

Read Next: How To Handle Keyboard Event In JavaScript

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.