Get values ​​from css source file using jQuery

Question

I come to this situation. Mostly my site has a lot of css templates, and users can dynamically change colors using jQuery. Now, as I did, it was to use jQuery to change the css property directly by selecting classes. However, if users switch to another template (also dynamically), I insert the .css file, but it has NO effect whatsoever. The reason is that css change style = ".." for each element has a precedent. How to fix this problem? I think of two ways:

• Remove the style = "..." on each element. But how to do that?
• Get values ​​directly from within the .css file and assign each element again as style = "..."

Can anyone show me some light on one? Thanks.

Answer 1

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

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

Just replace 'p' with all the elements from which you want to remove inline CSS, for example:

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

Hope this helps.

Answer 2

Before you disconnect a style from the original using jQuery, why don't you assign the original style value to the data for this element and then restore it using this value.

So, let's say you change the font family of the css element with the class "foo":

To apply the new css:

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

To return css:

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

Answer 3

CSS, :

style="[^"]*"