Remove all styling applied through Javascript

Question

Remove all styling applied through Javascript

If we consider the following scenario:

var e = document.getElementById("someElement");
e.style.borderColor = "gold";
e.style.background = "yellow";
e.style.padding = "5px";
// more style changes made through javascript

It's possible that additional styles were applied either inline or from an external CSS file.

Is there a way to completely remove all styles applied by Javascript? Perhaps something like e.style.* = inherit or

e.removeJavaScriptAppliedStyles()

.

javascript css

Answer 1

Answer №1

Here is the code snippet for you:

<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div id="click">click me</div>

//

$("div").css("color", "red");
$("#click").click(function () {
    $("*").removeAttr("style");
});

Please note James Bruckner's caution that this script removes all inline styles that were originally in the HTML. JavaScript modifies CSS by manipulating the style attribute, making it difficult to differentiate between original and programmatically set styles. (EDIT: Please refer to the comments below.)

Link to JSFiddle Example

Answer 2

Here is the code snippet for you:

<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div id="click">click me</div>

//

$("div").css("color", "red");
$("#click").click(function () {
    $("*").removeAttr("style");
});

Please note James Bruckner's caution that this script removes all inline styles that were originally in the HTML. JavaScript modifies CSS by manipulating the style attribute, making it difficult to differentiate between original and programmatically set styles. (EDIT: Please refer to the comments below.)

Link to JSFiddle Example

Answer 3

Answer №2

One potential approach is to save the original style attribute (

e._originalStyle = e.style.cssText

) in a hidden property, then recover it later when removing all styles applied through JavaScript (

e.style.cssText = e._originalStyle

)

Answer 4

One potential approach is to save the original style attribute (

e._originalStyle = e.style.cssText

) in a hidden property, then recover it later when removing all styles applied through JavaScript (

e.style.cssText = e._originalStyle

)

Remove all styling applied through Javascript

Answer №1

Answer №2

Similar questions

Here is a unique rewrite of the text: "Learn the process of toggling the tabindex for

The Angular model does not automatically refresh when the Space or Enter key is pressed

Navigating through Routing Express and sending data to a template

What is the best way to tidy up a function within a useEffect hook?

Show Random Section

Expanding and collapsing a single item in a ListView with React Native

Explore an array library in JavaScript

"Looping through each item in a list using Angular

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

What methods do certain API services use to accept Authorization headers from any source?

Using Bootstrap 4, create a responsive design that centers images within a div on mobile devices and positions them differently

Clear form values in react-hook-form upon form closure

Dynamic Bootstrap User Authentication Form

In Bootstrap 3, you can toggle individual collapsible items without affecting others by only closing the specific

How to efficiently assign a random set of values to a group of players in Javascript/nodejs while ensuring each player does not receive their own inputted value

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

Unable to save Firebase snapshot data into an array using a promise

What are some effective methods for optimizing GLSL/C code in Three.JS when using PerObject-Blur?

It's frustrating when Redux triggers unnecessary re-rendering of a component

Having trouble with asynchronous JSON calls in JavaScript when setting async to false