2013年6月21日 星期五

change the property of a css rule


It is interesting to change the CSS property of a rule not just an element.

By Totally Pwn CSS with Javascript, It is possible to do it by javascript.

The entry point is document.styleSheets.

For Firefox user, one can iterate the document.styleSheets[].cssRules[].selectorText to find the css selector. then add/modify/remove the rule to meet your requirement.
To add a rule, docuemnt.styleSheets[].addRule(ruleName, null, 0).
To remove a rule, document.styleSheets[].deleteRule(index);

For IE user, one can iterate the document.styleSheets[].rules[].
To add a rule, docuemnt.styleSheets[].insertRule(ruleName +'{ }', 0).
To remove a rule, document.styleSheets[].removeRule(index);