Sinuous Technical Notes

If you have a large collection of elements on a page that you want to change the css properties of you can dynamically change the css rules instead of iterating through every element on the page.

here is an example of how you can get hold of two css rules and manipulate them


if(document.styleSheets){
var sheet = document.styleSheets[0]
}
if(sheet){
var ssRules = sheet.cssRules || sheet.rules;
}
if(ssRules)
{
var result = null;
var common_style = null;
var different_style = null;

for(var c = 0; c < ssRules.length;c++)
{
if(ssRules[c].selectorText == ".different")
{
different_style = ssRules[c];
} else if(ssRules[c].selectorText == ".common")
{
common_style = ssRules[c];
}
if (different_style && common_style) break;
}
}


You can now change their position using common_style.style.display = ‘none’ etc.

Thanks to http://www.thescripts.com/forum/thread90644.html for the snippet

If an element started out with a style=”position:absolute” attribute then changing the style to something else (e.g. this_element.style.position = ‘fixed’) was producing screwy results in ie7. Naturally no dramas in firefox.

The solution was to declare different classes with the styles I wanted and dynamically change the className attribute instead of the style attribute.


.fixed_style { position:fixed;}
.absolute_style { position:absolute;}

my_element.className = 'fixed_style';
my_element.className = 'absolute_style';

worked like a charm

yet another piece of ie6 specific javascript that is no longer working in ie7.

had to use document.documentElement.scrollTop;

thanks to http://forums.asp.net/thread/1633238.aspx