Is there a way to drop all CSS changes made by JavaScript/JQuery

Question

Aside from doing property = blank like the example below, is there a way to drop all css changes made by a script without refreshing the page? Something like re-loading the original stylesheet?

$("#div".css({property1:"", property2:""});

I'm currently studying JavaScript and jQuery and I want to implement some sort of "reset" button to my page, which in some parts, color and size can be modified by the user.

I guess you need to keep track of the CSS you change with JavaScript somehow and use that to reset everything. — putvande
– putvande, Commented Dec 20, 2014 at 13:53
I think you should keep track of changes for further use. actually you need to know what has been changed. — sadrzadehsina
– sadrzadehsina, Commented Dec 20, 2014 at 13:53
You'll have to store all changes in an array with your preferred choice of manner and then create a function that iterates over each once, parses it, and undoes it. — Tai Kwangi Chicken
– Tai Kwangi Chicken, Commented Dec 20, 2014 at 13:56

Paul · Accepted Answer · 2014-12-20 13:59:38Z

4

Well, if all your original styles were loaded in a style sheet and all your changes were done via jquery (which applies the change directly to the style attribute), then one easy way to do it is:

$('#div').attr('style','');

If you want to apply it to all things with such a modification then you could use the attribute selector:

$('[style]').attr('style','');

answered Dec 20, 2014 at 13:59

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Kenji Over a year ago

Hi! Just wanted to make sure I understood it. $('#div').attr('style',''); is a more specific reset, it targets a div. while $('[style]').attr('style',''); targets the stylesheet directly and removes all styles?

Marventus Over a year ago

No, the stylesheet never gets modified by this command. What it does is set the element's style to empty. The difference between the two is that the first one targets only one element of the dom by id (#div), whereas the second one ($('[style]')) targets all elements with style attributes in the dom.

Paul Over a year ago

@Marventus I understand that, what he said he was looking for was a way to remove all the changes made via jquery using jquery.css(), not that he was trying to modify the spreadsheet.

Marventus Over a year ago

I know, Paul, ;-). I was answering to Michael's comment. My bad: I should have prefixed it with @Michael.

cram2208 · Accepted Answer · 2014-12-20 14:33:46Z

3

Like mentionned in previous answer, you can simply overwrite the style attribute with blank.

But, you can also remove it:

$("Your selector").removeAttr("style");

answered Dec 20, 2014 at 14:33

cram2208

4166 silver badges14 bronze badges

Comments

Marventus · Accepted Answer · 2014-12-20 15:10:17Z

0

If your element does not contain any other inline styles set by other functions, you could just set the default styles in your CSS style sheet, and remove the "style" attribute to remove its inline properties added through JS:

Pure JS:

var styled = document.querySelectorAll("*[style]");
for(i=0; i<styled.length;i++) {
    styled[i].removeAttribute("style");
}

jQuery:

$("*[style]").removeAttr("style");

Explanation:

Both approaches will remove inline styles from all the elements in the document.

Demo:

Here's a JSfiddle as a demo.

edited Dec 20, 2014 at 15:10

answered Dec 20, 2014 at 14:26

Marventus

8491 gold badge7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Is there a way to drop all CSS changes made by JavaScript/JQuery

3 Answers 3

4 Comments

Comments

Pure JS:

jQuery:

Explanation:

Demo:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Pure JS:

jQuery:

Explanation:

Demo:

Comments

Your Answer

Sign up or log in

Post as a guest

Related