Change Stylesheet Rule Selector Dynamically
This is a simplified version of how to dynamically change a selector rule: http://jsfiddle.net/vsync/SaQy6/ For a giver inline style:
Solution 1:
Demo - http://jsfiddle.net/vsync/SaQy6/6/
cross-browser way:
var styleTag = document.querySelector('#myStyle');
// the style sheet in the style tagvar sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet,
rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
if( sheet.cssRules ){
sheet.deleteRule(0); // deletes a rule at index 0
sheet.insertRule("ul > li:nth-child(2n){background:red}", 0);
}
else{
sheet.removeRule(0); // deletes a rule at index 0
sheet.addRule("ul > li:nth-child(2n)", 'background:red', 0);
}
Post a Comment for "Change Stylesheet Rule Selector Dynamically"