Get values from original css file using jQuery

Question

Hi all,

I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:

1. Delete the style="..." at each elememts. But how to do this?
2. Get the values directly from within .css file and assign to each elements again as style="..."

Anyone can show me some light on either one? Thanks.

Answer 1

Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.

So, for instance, say you're changing the css font-family of an element with class "foo":

To apply new css:

var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');

To revert the css:

var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);

Answer 2

If you just want to remove the style attribute from a group of elements you can use:

$('p').removeAttr('style');

Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:

$('input, div, h1').removeAttr('style');

Hope this helps.

Answer 3

Get rid of all inline CSS using this regex in your editor:

style="[^"]*"