CSS Manipulation using jQuery

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning

Overview

We can use jQuery to manipulate CSS in web applications. jQuery offers three methods. To change the CSS classes of elements, use the addClass(), removeClass(), and toggleClass() functions.

CSS and Its Properties

The CSS methods in jQuery allow you to change the CSS class or style properties of DOM items. Use the selection to obtain the reference to an element(s), then use jQuery CSS techniques to modify it. Some important methods are css(), addClass(), hasClass(), removeClass(), toggleClass(),etc.

You can update CSS using the jQuery css() method, which is used to get or set an element's style settings. Using this method, you can apply numerous styles to an HTML document at the same time by modifying CSS style properties.

Introduction to CSS Manipulation using jQuery

jQuery is a lightweight and entertaining JavaScript toolkit that allows you to change CSS in a variety of ways using various jQuery techniques. You can use these methods to set the style properties of elements, add or remove a specific class name from an element, or toggle between adding and removing classes.

CSS is manipulated using the jQuery methods listed below.

  • css() method
  • addClass() method
  • hasClass() method
  • removeClass() method
  • toggleClass() method

Methods for CSS Manipulation using jQuery

Sl. No.jQuery MethodDescription
1css()Get or set style properties for the specified element(s).
2addClass()To the specified element, add one or more classes(s).
3hasClass()Determine whether any of the provided elements have the supplied CSS class applied to them.
4removeClass()Remove a single, several, or all classes from the supplied element(s).
5toggleClass()Changes the classes of the provided objects by adding and removing them.

Now let's look at each of these methods in detail.

jQuery css() Method

The css() function of jQuery retrieves or sets style properties for the specified element(s).

Syntax:

Use a selector to acquire the reference to the element to which you wish to apply the style property, then call the css() function with the style property name and value parameters. You can also give a JSON object with style property name':'value to set multiple style properties.

Example:

In the preceding example, we set the background-color of #myDiv as well as the font styles for all <p> elements. Similarly, we may acquire the value of any style property by passing the property name as the first parameter to the css() method.

jQuery addClass() Method

The addClass() method of jQuery adds a single or multiple CSS classes to the specified element(s).

Syntax:

Then, as a string parameter, specify a selector to get the reference of an element to which you wish to set the CSS attribute, and then use the addClass() method with one or more class names. A space must be used to separate several class names.

Example:

To toggle CSS classes, specify a selector to acquire the reference to an element to which you wish to toggle CSS classes, and then call the toggleClass() method with the CSS class name as a string parameter.

Example:

In the preceding example, the CSS class yellowDiv will be added to the div element and then removed. As a result, CSS classes will be added or removed sequentially.

Conclusion

  • We can do CSS manipulation using jQuery methods such as css(), addClass(), removeClass(), toggleClass(), etc.
  • The css() method applies or fetches one or more style properties of an element.
  • The addClass() method detects whether an element has a class or not.
  • The removeClass() method removes class names from elements.
  • The toggleClass() method switches between adding and removing class names from elements.
  • Now you can use these methods to make your website more attractive and functional.