[jQuery] Manipulating a stylesheet directly
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?