HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
With jQuery, it is easy to manipulate the style of elements
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass() - Adds one or more classes to the selected elementsremoveClass() - Removes one or more classes from the selected elementstoggleClass() - Toggles between adding/removing classes from the selected elementscss() - Sets or returns the style attributeThe following stylesheet will be used for all the examples on this page:
The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
You can also specify multiple classes within the addClass() method:
$("button").click(function(){
$("#div1").addClass("important blue");
});
The following example shows how to remove a specific class attribute from different elements:
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
The following example will show how to use the jQuery toggleClass() method.
This method toggles between adding/removing classes from the selected elements:
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
The jQuery css() method will be explained in the next chapter.
Use a jQuery method to add the "important" class to a <p> element.
$("p").("");
For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.