JQuery modifying css class itself

Question

Is it possible to change css class using jQuery? For example, if I defined this class:

.my-class{ right:10px; } 

and now I want to change it to

 .my-class{ right:20px; } 

without having to select all the elements of this class using $ (". myClass"). The reason I want to do this is because I add a lot of elements at runtime in js, and it would be nice to change the class definition ahead of time.

.myClass is defined in the css file, otherwise I would suggest that I could change its definition with jsf / jstl if it were on the page.

Answer 1

Technically, you can edit style sheets using Javascript using the document.styleSheets object, but you can find a lot more work than it costs. Read this article to understand what this mess is: http://www.quirksmode.org/dom/changess.html

Answer 2

If I did this, I would do it with inline styles.

 <div style="right:20px"><!-- blank --></div> $('div').css('right','10px'); 

Another option is to have two classes and switch between them using toggleClass()

 <div class="right10"><!-- blank --></div> $('div').toggleClass('right20'); 

Answer 3

Add a second class and set the elements to be the second class when they are added? In addition, you can change stylesheets at runtime.

http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/