Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Which methods are used to set styles on selected elements in jQuery ?

  • Last Updated : 14 Aug, 2021

One or more styles can be added to the HTML elements by using the jQuery css() method. Even we can create some custom CSS class with the required styles that we want to add and add that class by using the addClass() method. In this article, we will see the two ways of adding one or more style properties.

css() method: The css() method is used to change the style property of the selected element. The css() in JQuery can be used in different ways.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax: 

  • For single style:



    $('selector').css('property':'value');
  • For multiple styles:

    $('selector').css({
        'property1': 'value1',
        'property2': 'value2'
    });

Example 1:

HTML




<!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" />
  
    <!-- Including jQuery  -->
    <script src=
        integrity=
    "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
  
    <style>
        h1 {
            color: #006600;
        }
          
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
          
        body {
            text-align: center;
        }
          
        p {
            font-size: 60px;
        }
          
        div {
            margin: 5px;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <button id="CSS">Click to see effect</button>
    <br />
  
    <div id="GFG">
        jQuery is one of the powerful libraries
        <br /> of javascript which has many 
        powerful<br /> methods that make the 
        manipulation of<br /> DOM much simpler 
        using the selectors and<br /> makes the 
        interaction with DOM much easier.
    </div>
  
    <script>
        $(document).ready(function() {
            $("#CSS").click(function() {
                $("#GFG").css({
                    "font-style": "italic",
                    "font-family": 
                    "Courier New, Courier, monospace",
                    "background-color": "lime",
                    "font-weight": "bold",
                    color: "#006600",
                });
            });
        });
    </script>
</body>
  
</html>

Output:

css() method

Using addClass() method: The addClass() method is used to add the classes to the particular element. We can add some CSS properties to the added classes.

Syntax:

  • For single class:

    $('selector').addClass('class_name');
  • For multiple classes:

    $('selector').addClass('class_name1 class_name2');

Example 2:

HTML




<!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" />
  
    <!-- Including jQuery  -->
    <script src=
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
  
    <style>
        h1 {
            color: #006600;
        }
          
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
          
        body {
            text-align: center;
        }
          
        div {
            margin: 5px;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
          
        .new_class {
            font-style: italic;
            font-family: Courier New, Courier, monospace;
            background-color: grey;
            font-weight: bold;
            color: #006600;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p><b>jQuery addClass() method</b></p>
  
    <button id="CSS">Click to add class</button>
    <br />
  
    <div id="GFG">
        jQuery is one of the powerful libraries
        <br /> of javascript which has many 
        powerful<br /> methods that make the 
        manipulation of<br /> DOM much simpler 
        using the selectors and<br /> makes the 
        interaction with DOM much easier.
    </div>
  
    <script>
        $(document).ready(function() {
            $("#CSS").click(function() {
                $("#GFG").addClass("new_class");
            });
        });
    </script>
</body>
  
</html>

Output:

addClass() method




My Personal Notes arrow_drop_up
Recommended Articles
Page :