How to Change CSS Class Name Runtime using javascript onclick Event

If you are aiming to make HTML elements and change its CSS properties without reloading the entire page then this post is for you. Most often we need to change CSS dynamically to fullfill user requirement. In this post i will show you through an Javascript code example how we can achieve it. So that you can easily understand & change CSS class dynamically or runtime in your page by writing a simple javascript function.

Why need to change CSS classname in Runtime since we can assign directly CSS property using javascript like below:

<script type="text/javascript">
	document.getElementById('divTXT').style.background='black';
</script>

The above javascript code will change your div background colour. But think if you also need to change the font-family, font-weight, font-size, color etc. then you need to write individual line to change each property for each HTML element. So it will be better to encapsulate or keep all CSS properties in a class & then just change the CSS class name in Runtime by using javascript.

To do that first open a HTML page then within the page body take a div to write a note on a specific issue. Then we will change the background color,font-color,font-weight etc. of this div in Runtime by clicking on an input button using javascript. Don’t worry you can download full working sourcecode from below.

Complete Javascript Code Example:

<html>

<head>
<title>Dynamically change CSS</title>

<script type="text/javascript">

function changeCSS(sclassName)
{
	document.getElementById('divTXT').className=sclassName;
}

</script>

<style>

.Aqua
{
	background-color: Aqua;
	font-family:tahoma;
	font-weight:bold;
	color:white;
}

.Crimson
{
	background-color: Crimson;
	font-family:tahoma;
	font-weight:bold;
	color:white;
}

.DarkGray
{
	background-color: DarkGray;
	font-family:tahoma;
	font-weight:bold;
	color:white;
}

.DeepPink
{
	background-color: DeepPink;
	font-family:tahoma;
	font-weight:bold;
	color:white;
}

.Fuchsia
{
	background-color: Fuchsia;
	font-family:tahoma;
	font-weight:bold;
	color:white;
}

</style>

</head>

<body>

	<input class="Aqua" type="button" value="Aqua" onclick="changeCSS('Aqua');"/>
	<input class="Crimson" type="button" value="Crimson" onclick="changeCSS('Crimson');"/>
	<input class="DarkGray" type="button" value="DarkGray" onclick="changeCSS('DarkGray');"/>
	<input class="DeepPink" type="button" value="DeepPink" onclick="changeCSS('DeepPink');"/>
	<input class="Fuchsia" type="button" value="Fuchsia" onclick="changeCSS('Fuchsia');"/>
	<br/><br/><br/>

	<div id="divTXT" style="width:250px;">
	In this article you will get tips on how to change HTML element class name property by using javascript.
	To do that you must follow the complete example. Initially copy all code & paste in your page to make
	exactl styles. After that try to change CSS properties & check the output. So keep trying....
	</div>

</body>

</html>

Note: The script provides cross browser support.

The Output in Google Chrome:
How_Javascript_runtime_change_css

Script Tested for the following Browsers:
1. Internet Explorer (IE)
2. Mozilla Firefox
3.Opera
4. Google Chrome

Download Code Example

2 thoughts on “How to Change CSS Class Name Runtime using javascript onclick Event

  • July 24, 2015 at 4:13 pm
    Permalink

    Could you use something similar to this to get the same affect as the :active pseudo tag in CSS? and if so how might that look?

    Reply
  • June 21, 2017 at 10:24 am
    Permalink

    Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code