Jquery Css Classes

jQuery - Get too Set CSS Classes

---

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

---

jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We volition hold back at the next methods:

• addClass() - Adds i or to a greater extent than classes to the selected elements
• removeClass() - Removes i or to a greater extent than classes from the selected elements
• toggleClass() - Toggles betwixt adding/removing classes from the selected elements
• css() - Sets or returns the agency attribute

---

Example Stylesheet

The next stylesheet volition last used for all the examples on this page:

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

---

jQuery addClass() Method

The next instance shows how to add together shape attributes to dissimilar elements. Of course of pedagogy you lot tin guide multiple elements, when adding classes:

Example

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

You tin likewise specify multiple classes inside the addClass() method:

Example

$("button").click(function(){
    $("#div1").addClass("important blue");
});

---

---

jQuery removeClass() Method

The next instance shows how to take a specific shape attribute from dissimilar elements:

Example

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

---

jQuery toggleClass() Method

The next instance volition exhibit how to utilization the jQuery toggleClass() method. This method toggles betwixt adding/removing classes from the selected elements:

Example

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});

---

jQuery css() Method

The jQuery css() method volition last explained inwards the adjacent chapter.

---