jQuery, altering css class itself

Question

Is it possible to alter css class with jQuery? For instance if i have this class defined:

.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 with $(".myClass"). The reason i want to do this is that i am adding a lot of elements at run time in js and it would be nice to swap the class definition ahead of time.

.myClass is defined in css file, otherwise i suppose i could have changed its definition with jsf/jstl had it been on the page.

Duplicate: stackoverflow.com/questions/622122/…

spinon
– spinon

2010-07-28 16:29:10 +00:00
Commented Jul 28, 2010 at 16:29 — spinon
– spinon, Commented Jul 28, 2010 at 16:29

edeverett · Accepted Answer · 2010-07-28 16:33:47Z

3

Technically you can edit stylesheets with Javascript using the document.styleSheets object but you might find it a lot more work than it's worth. Read this article to get an idea of what a mess it is: http://www.quirksmode.org/dom/changess.html

answered Jul 28, 2010 at 16:33

edeverett

8,2481 gold badge35 silver badges28 bronze badges

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

1 Comment

edeverett Over a year ago

Yeah, it's a shame that it's such a mess. It could be useful.

David Yell · Accepted Answer · 2010-07-28 16:27:13Z

1

If I was doing this I would do it with inline styles.

<div style="right:20px"><!-- blank --></div>

$('div').css('right','10px');

The other option is to have two classes and toggle between them using toggleClass()

<div class="right10"><!-- blank --></div>

$('div').toggleClass('right20');

answered Jul 28, 2010 at 16:27

David Yell

11.9k13 gold badges64 silver badges102 bronze badges

3 Comments

TJ Koblentz Over a year ago

I would say the same thing. If the styling is too variable, I'd go inline, if there are a set number of options, I would possibly define and toggle them.

Elijah Over a year ago

There are only two variations of the class, which makes it simpler. But i would prefer not to query the dom for these elements. The page i'm rendering is huge.

David Yell Over a year ago

Your selectors can be made more specific to speed things up.

Jonathan Park · Accepted Answer · 2010-07-28 16:30:14Z

1

Add a second class and set the elements to be the second class when you add them? Alternatively you can swap out style sheets at runtime.

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

answered Jul 28, 2010 at 16:30

Jonathan Park

7755 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery, altering css class itself

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related