You are definitely on the right track, Gordon.
Here's the code you need:
// Add a stylesheet with the given CSS styles (a text string)
// and return a reference to it
function addStyleSheet( css ) {
var sheet = document.createElement( 'style' );
sheet.type = 'text/css';
head.appendChild( sheet );
if( sheet.styleSheet )
sheet.styleSheet.cssText = css;
else
sheet.appendChild( document.createTextNode(css) );
return sheet;
}
// Replace a stylesheet with new CSS styles (a text string)
// and return a reference to it
function changeStyleSheet( sheet, css ) {
if( sheet.styleSheet )
sheet.styleSheet.cssText = css;
else
sheet.replaceChild(
document.createTextNode(css), sheet.firstChild );
return sheet;
}
// Example - add an empty stylesheet and then
// replace it with new styles
var sheet = addStyleSheet( '' );
changeStyleSheet( sheet,
'#test-id { /*...*/ } .test-class { /*...*/ }' );
Note that you don't try to access any existing stylesheet in your document.
You could do that, but I think it's better to create a new sheet dynamically
just for this purpose.
Given this code, can you think of a way to set all four position and size
values for *all* of your elements in a single changeStyleSheet() call, so
that you won't have to set any style attributes directly on the DOM
elements? That would make your animation even faster than you are hoping
for.
If the answer doesn't jump out at you, give me a shout back and I'll post a
more detailed example.
-Mike
> From: Gordon
>
> 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?
>
