Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




    <!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>

    
    

    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.




    <!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>

    
    

    Output:
    Before Styling:

    After clicking on Set Style:

    After clicking on Remove Style:



Last Updated : 22 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads