A little OT. Hope you don''t mind... here is a function which modifies
a
value in an external stylesheet (works in Firefox, IE 6, IE 5.5)...
I''ve rewritten it using prototype.js structures and suspect there are
some
additional optimizations which could be made. There may be a way to use
findAll or another equivalency operator to test for the innermost equality
and perform the assignment if it''s true?
Comments appreciated...
Sam
cssSelectorUpdate2: function(sSelector, sProperty, sValue) {
// Update the property value for a specific sSelector in a stylesheet
for(var i = 0; document.styleSheets.length > i; i++) { //
Mozilla
var oRules = document.styleSheets[i].rules ||
document.styleSheets[i].cssRules;
for(var j = 0; oRules.length > j; j++) {
var sSelectors = oRules[j].selectorText;
// string of all selectors on this line
var aSelectors = sSelectors.split('','');
// separate all selectors
for(var k=0; k<aSelectors.length; k++) {
if(aSelectors[k] == sSelector) {
oRules[j].style[sProperty] = sValue;
}
}
}
}
},
cssSelectorUpdate: function(sSelector, sProperty, sValue) {
// Update the property value for a specific sSelector in a stylesheet
$A(document.styleSheets).each(function(oStyleSheet) {
$A(oStyleSheet.rules ||
oStyleSheet.cssRules).each(function(oRule) {
oRule.selectorText.split('','').each(function(sSheetSelector) {
if(sSheetSelector == sSelector)
oRule.style[sProperty] = sValue;
});
});
});
},
Sample usage:
cssSelectorUpdate( ".myclass", ''color'',
''#ff0000''); // .myclass is a
selector in one of my stylesheets...
... Updating the stylesheet rather than the DOM has a virtue: When dynamic
Ajax content is loaded, the revised external stylesheet rules automatically
apply. It seems to simplify the application I have in development.
