Short Intro of jQuery Inbuilt Methods for Handling CSS

Manipulating the UI style or CSS at runtime is a very common project. With plain JavaScript, adding and removing CSS classes or inline stylings of the matched element can be tricky. Luckily, jQuery has some inbuilt methods to make this whole process effortless! The methods are .addClass(), .removeClass(), .hasClass(), .toggleClass() and .css(). The names of these methods are self-explanatory and give you some insight into their functionality. In this short post, we’ll look at each of these methods in action.

.addClass()

The .addClass() method simply adds the class to any element. It doesn’t replace a class, it simply appends. To add a CSS class to any element,

$("#elm").addClass("myClass");

This method adds a class attribute to the selected element. You can also add multiple CSS classes in one go. Just separate the class names with a space. Like,

$("#elm").addClass("myClass myClass2");

.removeClass()

The .removeClass() method removes a single class, multiple classes, or all classes from each element in the set of matched elements. Like,

$("#elm").removeClass("myClass");

If you don’t supply any class name, then all the CSS classes applied to the matched element will be removed. Like,

$("#elm").removeClass();

.hasClass()

If you want to check if a CSS class is assigned to an element or not, use the hasClass() method. This will return true or false. Consider the following HTML,

<div id="elm" class="dummy"></div>

The following jQuery code will return true:

$("#elm").hasClass("dummy");

This is quite useful in cases where, based on certain conditions, you need to take further actions.

.toggleClass()

The .toggleClass() method is a combination of the .addClass() and .removeClass() methods. This method takes one or more class names as its parameter. It first checks if an element in the matched set of elements already has the class, then it is removed. If an element does not have the class, then it is added. Consider the following HTML,

<div id="elm" class="dummy"></div>

The following jQuery code attaches toggleClass() method to the div element.

$("#elm").toggleClass("dummy2");

When this code runs for the first time, it adds dummy2 class to the div element because the original element didn’t have it. So the HTML becomes,

<div id="elm" class="dummy dummy2"></div>

When the same jQuery code runs for the second time, it removes dummy2 CSS class from the div element and the HTML reverts back to the original,

<div id="elm" class="dummy"></div>

.css()

All the above method deals with the class attribute, but the .css() method is used for inline style. It adds and removes style attributes for the selected element. For example, to change the background color to red,

$("#elm").css("background-color", "red");

This will add the style attribute to the element. Like,

<div id="elm" style="background-color:red;"></div>

Using this method, you can also set multiple CSS properties in one call. Like,

$("#elm").css({
 "background-color", "red",
 "color", "black"
 });

Or get the value of any CSS property. Like,

var backColor = $("#elm").css("background-color");

To remove any inline CSS property, simply pass an empty string. Like,

$("#elm").css("background-color", "");

Bonus tip: If you want to completely remove the inline style attribute, then use the removeAttr() method,

$("#elm").removeAttr("style");

Conclusion

This post provides a brief insight into various inbuilt methods available in jQuery to play around with CSS or inline element styling. These methods can add, remove or toggle the CSS classes or inline style. Using these methods can save a lot of development time and creates a clean code. Definitely worthy of your jQuery toolkit!