How to remove style added with .css() function using JavaScript?

There are many cases, especially as the content gets more interactive, where the developer want 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 is one that 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.

  • JavaScript:
    • removeAttribute():It remove an attribute with specified name from the element.
    • setAttribute():It sets the value of an attribute on the specified element.




    Example-1: Below example illustrates how to set/remove styles in JavaScript.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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">
        removestyle = () => {
            document.getElementById(
              "gfg").removeAttribute("style");
            
            document.getElementById(
              "setstyle").removeAttribute("disabled");
            
            document.getElementById(
              "removestyle").setAttribute("disabled", "true");
        };
    </script>
      
    </html>

    chevron_right

    
    

    Output:
    Before Styling:

    After clicking on Set Style:

    After clicking on Remove Style:

  • jQuery:
    • css():It sets or returns one or more style properties for selected elements.
    • attr():It is used to set or return attributes and values of the selected elements.
    • removeAttr():It removes one or more attributes from the selected elements.



    Example-2: Below example illustrates how to set/remove styles in jQuery.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <title>Jquery example</title>
                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");
            }
        });
    </script>
      
    </html>

    chevron_right

    
    

    Output:
    Before Styling:

    After clicking on Set Style:

    After clicking on Remove Style:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.