jQuery – Get and Set CSS Classes |jQuery css() Method|jQuery Manipulating CSS|Example Stylesheet | jQuery addClass() Method

  • With jQuery, it is easy to manipulate the CSS of elements.

jQuery Manipulating CSS :

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() – Adds one or more classes to the selected elements
  • removeClass() – Removes one or more classes from the selected elements
  • toggleClass() – Toggles between adding/removing classes from the selected elements
  • css() – Sets or returns the style attribute

Example Stylesheet :

  • The following stylesheet will be used for all the examples on this page:

 

.important </span>{
<span class="highATT">font-weight:</span><span class="highVAL"> bold;</span>
<span class="highATT">font-size:</span><span class="highVAL"> xx-large;</span>
}

<span class="highELE">.blue </span>{
<span class="highATT">color:</span><span class="highVAL"> blue;</span>
}

jQuery addClass() Method :

  • The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>

</body>
</html>
  • You can also specify multiple classes within the addClass() method:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>

<button>Add classes to first div element</button>

</body>
</html>

jQuery removeClass() Method :

  • The following example shows how to remove a specific class attribute from different elements:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}
</style>
</head>
<body>

<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Remove class from elements</button>

</body>
</html>

jQuery toggleClass() Method :

  • The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
</script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Toggle class</button>

</body>
</html>

jQuery css() Method :

  • The jQuery css() method will be explained in the next chapter.

Test Yourself with Exercises! :

Example : 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Example : 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// add code here
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}

.test {
color: red;
border: 5px dotted blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Example : 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
// add code here
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
background-color: yellow;
}
</style>
</head>
<body>

<p>This is a paragraph - Click me to toggle class!</p>

</body>
</html>