Most of the time css rules are overridden to get a different style, but some rules need to be outright removed. For example, if a hover effect is in place when javascript is disabled, but the rule might interfere with the javascript code when javascript is enabled. This might happen when using a jQuery plugin for menu creation or text effect.
The following code will demonstrate the removal of a :hover selector from a ‘p’ tag.
//Get rules off the sheet object var mainRules; if (mainStyles.cssRules) { mainRules = mainStyles.cssRules; } elseif (mainStyles.rules) { mainRules = mainStyles.rules; }
//Notes for Rules //http://help.dottoro.com/ljnefpqb.php
//Iterate through the stylesheet rules var theKey; for (key in mainRules) { //Make sure key is valid if (typeof mainRules[key].selectorText != 'undefined') { //The string will be the name of the selector that is to be removed if ("#paragraph-is-orange-when-hover:hover" == (mainRules[key].selectorText)) { //Coercing the string key to a number key theKey = key * 1; } } }
//Remove the rule if (mainStyles.deleteRule) { mainStyles.deleteRule(theKey); } else { mainStyles.removeRule(theKey); }
//Notes for Deleting Rules //deleteRule: http://help.dottoro.com/ljcihbgl.php //removeRule: http://help.dottoro.com/ljdupbal.php
//Note: Chrome-based browser only allow stylesheet manipulation //if the parameter "--allow-file-access-from-files" is set for local file access //http://www.chrome-allow-file-access-from-file.com/