有没有办法删除由JavaScript / JQuery所做的所有CSS更改

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.

Answer 1

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','');

Answer 2

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

But, you can also remove it:

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

Answer 3

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.