How To Set Style In Jquery

by

jQuery is a powerful JavaScript library that simplifies HTML document traversal, manipulation, event handling, and
animation. One of its many useful features is the ability to easily change the style of elements on your webpage.
In this blog post, we’ll discuss how to set styles in jQuery using various methods.

1. Using .css() method

The .css() method is the most common way to set styles in jQuery. This method can be used in two
ways:

  • Single style property: Pass the name of the CSS property as the first argument and its corresponding value
    as the second argument.
  • Multiple style properties: Pass an object containing CSS property-value pairs as the argument.

Setting a Single Style Property

To set a single CSS property using the .css() method, you need to provide the name of the
property and its value as arguments.

For example, to change the color of all paragraphs to red, you can use the following code: 

    $('p').css('color', 'red');

Setting Multiple Style Properties

If you want to set multiple CSS properties at once, you can pass an object containing the property-value pairs as
the argument.

For example, to change the font size to 18px and the background color to light grey for all paragraphs, you can
use the following code: 

    $('p').css({
        'font-size': '18px',
        'background-color': 'lightgrey'
    });

2. Using .addClass() and .removeClass() Methods

Another way to set styles in jQuery is by adding or removing CSS classes from elements using the
.addClass() and .removeClass() methods.

For example, suppose we have the following CSS class: 

    .highlight {
        background-color: yellow;
        font-weight: bold;
    }

To add the ‘highlight’ class to all paragraphs, you can use the following code: 

    $('p').addClass('highlight');

To remove the ‘highlight’ class from all paragraphs, you can use the following code: 

    $('p').removeClass('highlight');

3. Using .toggleClass() Method

The .toggleClass() method allows you to add a class if it’s not present on the element or
remove it if it’s already present. This is useful when you want to toggle a style on and off with a single
function.

For example, to toggle the ‘highlight’ class on all paragraphs, you can use the following code: 

    $('p').toggleClass('highlight');

Conclusion

jQuery provides several ways to set styles on your webpage. The .css() method is useful for
setting individual or multiple style properties, while the .addClass(),
.removeClass(), and .toggleClass() methods are great for working with CSS
classes.

With these methods at your disposal, you can easily manipulate the appearance of elements on your webpage using
jQuery.