CSS Manipulation using jQuery

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

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.