How to Remove and add Style with .css() Function using JavaScript?

Last Updated : 07 Oct, 2024

There are many cases, especially as the content gets more interactive, where the developer wants styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles doesn't help.

The solution to overcome all of these problems involves JavaScript/jQuery. It not only lets style the element users are interacting with, more importantly, but it also allows developers to style elements all over the page. This freedom is very powerful and goes well beyond CSS's limited ability to style content inside itself.

These are the following approaches:

Table of Content

Using JavaScript
Using jQuery

Using JavaScript

In the JavaScript approach, we directly manipulate DOM elements using methods like setAttribute, removeAttribute, and getElementById.
The setstyle function uses setAttribute to apply inline CSS styles to the paragraph (<p>) element, changing its text color, background, and padding.
It also disables the "Set Style" button and enables the "Remove Style" button by toggling their disabled attributes.
The removestyle function removes the inline styles using removeAttribute, and resets the buttons' states accordingly.

Example: This example shows the addition of styling using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JavaScript example</title>
</head>

<body>
    <div>
        <p id="gfg">
            Welcome to Geeks for Geeks
        </p>
    </div>
    <button type="button" id="setstyle" 
            onclick="setstyle()">
        Set Style
    </button>
    <button type="button" id="removestyle" 
            onclick="removestyle()" disabled>
        Remove Style
    </button>

</body>

<script type="text/javascript">
    // Define the css() function to set styles
    function css(element, styles) {
        for (let property in styles) {
            element.style[property] = styles[property];
        }
    }

    function setstyle() {
        const gfgElement = document.getElementById("gfg");

        // Use the css() function to apply styles
        css(gfgElement, {
            color: "green",
            fontSize: "20px"
        });

        document.getElementById("setstyle")
                .setAttribute("disabled", "true");
        document.getElementById("removestyle")
                .removeAttribute("disabled");
    }

    function removestyle() {
        const gfgElement = document.getElementById("gfg");

        // Reset styles by using the css() function
        css(gfgElement, {
            color: "",
            fontSize: ""
        });

        document.getElementById("setstyle")
                .removeAttribute("disabled");
        document.getElementById("removestyle")
                .setAttribute("disabled", "true");
    }
</script>

</html>

Output:

Using jQuery

In the jQuery approach, the same functionality is achieved using jQuery's simplified DOM manipulation methods like css(), attr(), and removeAttr().
The setstyle function uses css() to directly apply multiple CSS properties to the paragraph element and attr() and removeAttr() to control the buttons' disabled state.
The removestyle function removes all inline styles with removeAttr('style') and restores the buttons' states.

Example: This example shows the addition of styling using jQuery.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Jquery example</title>
    <script src=
"https://code.jquery.com/jquery-3.3.1.js"
            integrity=
"sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
        </script>
</head>

<body>
    <div>
        <p id="gfg">
            Welcome to Geeks for Geeks
        </p>
    </div>
    <button type="button" id="setstyle" 
            onclick="setstyle()">
        Set Style
    </button>
    <button type="button" id="removestyle"
            onclick="removestyle()" disabled>
        Remove Style
    </button>

</body>

<script type="text/javascript">
    $(document).ready(() => {
        setstyle = () => {
            $("#gfg").css({
                "color": "white",
                "background-color": "green",
                "padding": "10px",
            });
            $("#setstyle").attr("disabled", true);
            $("#removestyle").removeAttr("disabled");
        };

        removestyle = () => {
            $("#gfg").removeAttr("style");
            $("#setstyle").removeAttr("disabled");
            $("#removestyle").attr("disabled", true);
        };
    });
</script>

</html>