Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

One or more styles can be added to the HTML elements by using the jQuery css() method. Even we can create some custom CSS classes 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.

Syntax: 

For single style:

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

For multiple styles:

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

Example 1: In this example, we are using the above-explained method.

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: In this example, we are using the above method.

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



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads