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

22 Apr, 2019
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:
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>    <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");        }    });</script>  </html>Output:Before Styling:After clicking on Set Style:After clicking on Remove Style:
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>    <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");        }    });</script>  </html>
Output:Before Styling:
After clicking on Set Style:
After clicking on Remove Style:
JavaScript-Misc
Picked
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
How to Use the JavaScript Fetch API to Get Data?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to add options to a select element using jQuery?