Jquery Addclass Removeclass Example - Jquery
How to add and remove css style using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Jquery functions addstyle() and removestyle() are used to add or remove class from the HTML element. They are done through simple jquery addclass() and removeclass() methods.
<script type='text/javascript'>
function addstyle(id,cls){
$("#"+id).addClass(cls);
$("#add").css("display","none");
$("#remove").css("display","inline");
}
function removestyle(id,cls){
$("#"+id).removeClass(cls);
$("#remove").css("display","none");
$("#add").css("display","inline");
}
</script>
<style>
.addcls
{
font-weight:bold;
font-size:1.2em;
color:yellow;
background:green;
border-radius: 25px;
padding:10px;
}
</style>
<div align='center'>
<input type='button' id='add' value='Add Class' onclick="addstyle('am','addcls')">
<input type='button' id='remove' value='Remove Class' style='display:none;' onclick="removestyle('am','addcls')">
<div id='am' class='add' align='center'>Welcome to Hscripts.com!!!</div>
</div>
