I don't know if this will help (does not depend on jQuery):
http://webdevel.blogspot.com/2006/06/create-css-class-javascript.html
It's not been compared with using jQuery to alter CSS, but I think it
may be faster. It modifies the CSS properties directly (replaces them
with what you enter). It adds a <style> to a page if one does not
exist (i.e. there are no stylesheets linked, or <style> elements in
the document).
On Jul 4, 10:39 am, Gordon <[EMAIL PROTECTED]> wrote:
> When working with jquery and javascript in general I have found that
> manipulating DOM attributes, especially those associated with the
> appearence of an element, can be rather slow. In one script I am
> working on I have to animate a group of elements at once, but each
> element has to get a different top and left position. This means that
> each element must get its own top and left styles.
>
> Another thing the loop has to do is change the width and height of the
> elements being processed, but in this case all elements get the same
> dimensions.
>
> The loop currently manipulates 4 attributes per element (style.width,
> style.height, style.top, style.left) and can get rather slow when
> working with a large number of elements.
>
> this.each (function (thisElemNum)
> {
> var elem = $(this);
> // Calculate the new position and dimensions for the element
> var newProps = {
> left : someLeftVal,
> top : someTopVal,
> width : 100,
> height : 100
> };
> elem.animate (newProps, speed)
>
> });
>
> (The width and height can change from one invokation of the loop to
> the next, but for each invokation they remain constant for all
> iterations)
>
> One idea that occured to me is that instead of animating the width and
> height on a per-element basis, I could use CSS to define the width and
> height and then animate those attributes by changing the width and
> height degined in the stylesheet. This would mean only animating 2
> attributes per element, plus a further 2 in the stylesheet as opposed
> to 4 attributes per element, which should hopefully lead to a
> considerable speedup. I would give all the elements a class, define a
> width and height for that class in the stylesheet and then change that
> with animate() in order to change the width and height of all elements
> similtaniously.
>
> The only problem is I have no idea how to go about doing it. Is doing
> what I want to be able to do even possible? If so, how do I get at
> the stylesheet node and manipulate it like I would a DOM element?
