jQuery Tutorial

jQuery CSS Methods - addClass and removeClass

addClass method

addClass() method is used to add one or more space-separated specific CSS classes to each element in the set of matched elements.

$("p").addClass("css-class1 css-class2 css-class3 ..")

addClass with single class

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").addClass( "paragraph1" );
});
</script>
<style>
.paragraph1 {
color: blue;
background-color: lightgrey;
font-size: 16px;
}
</style>
</head>
<body>
<p>Welcome to jQuery learning!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

addClass with multiple class

Multiple class can be specified in space separated CSS classes.

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").addClass( "paragraph1 bolder" );
});
</script>
<style>
.paragraph1 {
color: blue;
background-color: lightgrey;
font-size: 16px;
}
.bolder{
font-weight: bold;
}
</style>
</head>
<body>
<p>Welcome to jQuery learning!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

addClass and inner function with index argument

CSS class can be also inner function return value for addClass method.

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$( "p" ).addClass(function( index ) {
  return "paragraph" + index;
});
});
</script>
<style>
.paragraph0 {
color: blue;
background-color: grey;
font-size: 20px;
}
</style>
</head>
<body>
<p>Welcome to jQuery learning!</p>
<p>Welcome to jQuery lab!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

Welcome to jQuery lab!

removeClass method

removeClass() method is used to remove one or more space-separated specific CSS classes to each element in the set of matched elements.

$("p").removeClass("css-class1 css-class2 css-class3 ..")

removeClass with single class

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").removeClass( "paragraph1" );
});
</script>
<style>
.paragraph1 {
color: blue;
background-color: lightgrey;
font-size: 16px;
}
</style>
</head>
<body>
<p class="paragraph1">Welcome to jQuery learning!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

removeClass with multiple class

Multiple class can be specified in space separated CSS classes.

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").removeClass( "paragraph1 bolder" );
});
</script>
<style>
.paragraph1 {
color: blue;
background-color: lightgrey;
font-size: 16px;
}
.bolder{
font-weight: bold;
}
</style>
</head>
<body>
<p class="paragraph1 bolder">Welcome to jQuery learning!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

Using addClass and removeClass in same jQuery object

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("p").removeClass( "paragraph1" ).addClass("bolder");
});
</script>
<style>
.paragraph1 {
color: blue;
background-color: lightgrey;
font-size: 16px;
}
.bolder{
font-weight: bold;
}
</style>
</head>
<body>
<p class="paragraph1">Welcome to jQuery learning!</p>
</body>
</html>

Output:

Welcome to jQuery learning!

« Previous Next »

jQuery Programming Examples