Delay rendering of dom element when changing properties

Question

I\'ve currently run into a performance problem when updating properties on lots of dom elements at once. It seems that each time I change a property the dom element gets re-

Answer 1

It seems to be a lot slower in FF 3 & 3.5 than IE 7 & 8 which goes against what i expected.

Currently FF recalculates the layout straight away on a property change. IE waits until either it has to redraw the page, or you access a property like offsetWidth that needs to know the new layout. This didn't always used to work correctly.

CMS's approach is good. If all your tiles are the same size as in the example, there's an even quicker way (which also works if the tiles don't have a common parent). Just give them all a class and switch them all at once using CSS:

body.tiles100 .tile { width: 100px; height: 100px; }

document.body.className= 'tiles100';

If you don't know a predefined selection of possible sizes in advance, you'd have to write the stylesheet rule dynamically, through the document.styleSheets list. This is a bit of a pain, though, because the scripting interface in IE doesn't quite match the DOM standard used by other browsers. Again.