3

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 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.

Improve this question
3
  • This is an example: - I have theme-1.css --> theme-10.css - User clicks theme-1.css and it loads the .css file into header - User can now change the color and this affects the "elements" themselves - Now if user wants to switch to theme-2.css, I load the .css file into header again. However, no impact on the elements color because they all got style="..." already assigned Commented Sep 30, 2009 at 6:53
  • If you are using jQuery css() command then you are adding styles directly to the element and not touching the element class attributes. You can just use removeAttr('style') to remove the online styling Commented Sep 30, 2009 at 6:59
  • That should have said inline styling :) Commented Sep 30, 2009 at 6:59

4 Answers 4

Reset to default
6

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.

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

2 Comments

Another question: how do I exclude the elements with only style="display:none;"? Because for those I want to continue make them hidden
Take a look at the :visible and :hidden selectors. E.g: $('p:visible').removeAttr('style');
3

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);
Improve this answer

2 Comments

Thanks for the response. I know I can save original values but if there are many themes and users switching around. Please see my modified comments above.
In that case I think your only real option is to cause the contents to reload. Stick a <div> around the content whose CSS can change and re-load that content using ajax each time the CSS changes... this should be simple with jQuery.
0

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

style="[^"]*"
Improve this answer

Comments

0

i just had the same problem, but i think the best solution is to use the jquery add and remove class. each template should have a class, then to change it, use the remove class and add the desired class

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.