addClass method in jQuery with example
1. addClass() method adds the specified class to elements matching the specified selector.
2. addClass() adds the class, It do not replace the class. It will append to already existing class.
3. Using addClass() more than one class can be added at once, separated by comma.
Example 1 :
<html>
<head>
<title>addClass</title>
<style>
.thisDiv
{
background-color:Red;
margin-left:400px;
width:200px;
height:200px;
display:block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#myDiv").hover(function () {
$(this).addClass("thisDiv");
});
});
</script>
</head>
<body>
<span id="myDiv">
Hover Me
</span>
<br />
<input type="reset" id="reset" value="Reset" />
</body>
</html>
Demo :
In the above example, we have created a span and one style class initially. Using jQuery on hovering the span, we are assigning the created class to the span using addClass() method, which manipulates the style of the span.
Example 2 :
<html>
<head>
<title>addClass</title>
<style>
.thisDiv
{
background-color:Red;
width:200px;
height:200px;
display:block;
}
.Green
{
background-color:Green!important;
}
.Yellow
{
background-color:Yellow!important;
}
.Aqua
{
background-color:aqua!important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".thisDiv").hover(function () {
$(".thisDiv").addClass(function (index) {
if (index == 0) {
return "Green";
}
if (index == 1) {
return "Yellow";
}
if (index == 2) {
return "Aqua";
}
else {
return false;
}
});
});
$("#reset").click(function () {
location.reload();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<span class="thisDiv">Hover Me 1</span>
</td>
<td>
<span class="thisDiv">Hover Me 2</span>
</td>
<td>
<span class="thisDiv">Hover Me 3</span>
</td>
</tr>
</table>
<input type="button" id="reset" Value="Reset" onclick="location.reload()" />
</body>
</html>
Demo :
In the above example, we have created three span elements inside table structure, we have created three classes with different background colors. We have applied same class to all the span elements.
Using class selector, on hovering any of the span we are getting all the span elements on the document and one by one assign different classes depending on the index passed to the function inside addClass() method.
Example 3 :
<html>
<head>
<title>addClass</title>
<style type="text/css">
.aqua
{
color:aqua;
font-family:comic sans ms;
font-weight:bold;
}
.orange
{
color:orange;
font-family:comic sans ms;
font-weight:bold;
}
.red
{
color:red;
font-family:comic sans ms;
font-weight:bold;
}
.green
{
color:green;
font-family:comic sans ms;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var allClass = 'aqua orange red green';
$(":button").click(function (e) {
var appliedClassName = $('#target')[0].className;
$('#target').removeClass(appliedClassName).addClass(e.target.id);
});
});
</script>
</head>
<body>
<p id="target">This is p element. This is our target element.</p>
<input type="button" id="aqua" value="Add class aqua"/>
<input type="button" id="orange" value="Add class orange"/>
<input type="button" id="red" value="Add class red"/>
<input type="button" id="green" value="Add class green"/>
<input type="button" value="Reset" onclick="location.reload()" />
</body>
</html>
Demo :
In the above example, we have created four CSS classes. We have rendered paragraph element in the example. We have created buttons respective to each class. On click of each button, particular class is applied to the paragraph element.
Watch Video :
0 comments:
Post a Comment