JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.6.2 Querying, Inserting and Deleting Stylesheet Rules


16.6.2 Querying, Inserting and Deleting Stylesheet Rules

In addition to disabling and enabling stylesheets, the CSSStyleSheet object also defines an API for querying, inserting, and deleting the style rules of a stylesheet. IE8 and before implement a slightly different API than the standard API implemented by other browsers.

Manipulating stylesheets directly is not normally a useful thing to do. Instead of editing or adding new rules to a stylesheet, it is typically better to leave your stylesheets static and script the className property of your elements. On the other hand, if you want to allow the user complete control over the styles used on your pages, you might need to dynamically manipulate a stylesheet.

The elements of the document.styleSheets[] array are CSSStyleSheet objects. A CSSStyleSheet object has a cssRules[] array that contains the rules of the stylesheet:

var firstRule = document.styleSheets[0].cssRules[0];

IE uses the property name rules instead of cssRules.

The elements of the cssRules[] or rules[] arrays are CSSRule objects. In the standard API, a CSSRule object may represent any kind of CSS rule, including at-rules such as @import and @page directives. In IE, however, the rules[] array contains only the actual style rules of the stylesheet.

CSSRule objects have two properties that can be used portably. (In the standard API, a rule that is not a style rule will not have these properties defined, and you probably want to skip over it when traversing the stylesheet.) selectorText is the CSS selector for the rule, and style refers to a writable CSSStyleDeclaration object that describes the styles associated with that selector. Recall that CSSStyleDeclaration is the same type used to represent inline and computed styles. You can use this CSSStyleDeclaration object to query the style values or to set new styles for the rule. Often, when traversing a stylesheet, you are interested in the text of the rule rather than a parsed representation of the rule. In this case, use the cssText property of the CSSStyleDeclaration object to obtain the text representation of the rules.

In addition to querying and altering the existing rules of a stylesheet, you can also add rules to and remove rules from a stylesheet. The standard API interface defines insertRule() and deleteRule() methods for adding and removing rules:

document.styleSheets[0].insertRule("H1 { text-weight: bold; }", 0);

IE does not support insertRule() and deleteRule() but defines largely equivalent addRule()and removeRule()functions. The only real difference (aside from the different names) is that addRule() expects the selector text and styles text as two separate arguments.

16.6 Scripting Stylesheets | 441

The following code loops through the rules of a stylesheet, demonstrating the API by making some dubious changes to the stylesheet:

var ss = document.styleSheets[0]; // Get the first stylesheet var rules = ss.cssRules?ss.cssRules:ss.rules; // Get the stylesheet rules

for(var i = 0; i < rules.length; i++) { // Loop through those rules var rule = rules[i]; if (!rule.selectorText) continue; // Skip @import and other nonstyle rules

var selector = rule.selectorText; // The selector var ruleText =; // The styles, in text form

// If the rule applies to h1 elements, apply it to h2 elements as well // Note this only works if the selector is literally "h1" if (selector == "h1") {

if (ss.insertRule) ss.insertRule("h2 {" + ruleText + "}", rules.length); else if (ss.addRule) ss.addRule("h2", ruleText, rules.length); }

// If the rule sets the text-decoration property, delete it.

if ( { if (ss.deleteRule) ss.deleteRule(i); else if (ss.removeRule) ss.removeRule(i); i--; // Adjust the loop index since the former rule i+1 is now rule i

} }

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1