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><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript example</title></head><body><div><pid="gfg">Welcome to geeks for geeks</p></div><buttontype="button"id="setstyle"onclick="setstyle()">Set Style</button><buttontype="button"id="removestyle"onclick="removestyle()"disabled>Remove Style</button></body><scripttype="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 geeksforgeeks</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: