Subscribe
Please visit my new Web Site https://coderstechzone.com
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 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 you need to change CSS classname since you can change directly CSS property using javascript like:
<script type="text/javascript">
document.getElementById('divTXT').style.background='black';
</script>
document.getElementById('divTXT').style.background='black';
</script>
The above javascript code will change your div background color. 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 property by using javascript.
To do that first take a 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 by clicking on an input button using javascript.
Complete Example:
HTML Code:
<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>
<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>
Output:
1 comments:
wow really great tutorial thanks a lot for sharing with us.
I WOULD BE DELIGHTED TO HEAR FROM YOU