How to define multiple CSS attributes in jQuery?

Learn, how to change or set multiple CSS properties/attributes using jQuery for an element?
Submitted by Pratishtha Saxena, on December 26, 2022

CSS – Cascading Style Sheet is a way of styling the Html webpage and making it's look more attractive and user-friendly.

This styling of the webpage using CSS can be handled using jQuery also. Some changes can be made to the CSS properties, also if one wants to remove or add new CSS completely then that can also be achieved. The jQuery CSS() method helps to do a lot of things.

jQuery .css() Method

Get CSS:

css() is an inbuilt jQuery method that helps to set or get the CSS properties of an element. If the property has already been declared for the element, then by using this we a return the specific property we need. For this, the specific property name is given. It gives the CSS property of the first matched element.

Syntax:

$('selector').css('property');

Set CSS:

If we wish to style the element using jQuery, then using css() we can achieve this. If we need to set a particular property, then along with the property name, the property value is also specified. It sets the CSS property for all the matched elements.

Syntax:

$('selector').css('property','value');

Set Multiple CSS

Similarly, multiple CSS properties can be defined using this css() method. While declaring various properties, we make use of curly brackets and differentiate the properties with a comma.

Syntax:

$('selector').css({'prop1':'val1', 'prop2':'val2', ...});
    $('selector').css({
        'prop1':'val1', 
        'prop2':'val2',
        ...
    });

Here's an example of setting multiple CSS for paragraph elements in the document using jQuery's css() method. When the button provided is clicked, all the text contained within the <p> tag changes its CSS properties.

jQuery example to define multiple CSS attributes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>How to define multiple CSS attributes in jQuery?</h2>
    <h4>Click the button to change multiple CSS properties of the following text.</h4>
    <button>Change CSS</button>
    <hr>
    <p>Welcome to Include Help !!!</p>
    <p>jQuery Tutorial</p>
    <p>Thanks for Visiting !!!</p>
    <hr>
    <h4 id="one"></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('p').css({
                'color':'darkblue',
                'font-weight':'bold',
                'font-size':'larger',
            });
        });
    }); 
  </script>
</html>

Output:

Example: How to define multiple CSS attributes in jQuery?