 | ||||||
| ||||||
Dynamically changing cascading style sheets (CSS) styles that are applied to documents is not limited to the inline styles (styles defined with the STYLE= attribute). Global style sheets defined with a LINK or STYLE tag in the HEAD section of the document can be manipulated through script. Manipulating the global style sheet is a powerful way to dynamically change the styles that apply to Web pages.
Global style sheets are made accessible to script through the styleSheets collection on the document object. This collection represents instances of STYLE and LINK elements in the HEAD section of the document with a type (or type attribute) of "text/css". Style sheets of other types are not supported. Imported style sheets are contained within a STYLE element, and are surfaced by the containing STYLE element as type styleSheet. STYLE and LINK elements can be added to the document through the createElement method on the window object. This method adds a new style sheet object to the styleSheets collection on the document. Style rules and imported style sheets can then be added to this style sheet with the addImport and addRule methods.
You can use identifiers to access style sheets in the document. You set an identifier for a style sheet by setting the ID attribute of the LINK or STYLE element.
A powerful feature of the styleSheet object is that you can turn a style sheet off and on dynamically. The disabled property defaults to false, but can be set to "true" to remove the style sheet from being applied to the document. Toggling the application of style sheets is another technique for dynamically changing the style of a Web page.
You can replace one style sheet with another by setting the href property of the style sheet to the URL of the replacement, as in the following example:
if (document.styleSheets(0).href != null)
document.styleSheets(0).href = "newstyle.css";
When you replace a style sheet, the styleSheets collection is immediately updated to reflect the change. Replacing a style sheet in this way is available only for style sheets that have been included using the LINK element or the @import statement. The href property is null for style sheets defined using the STYLE element.
Each style sheet is a collection of rules. The rules collection of the styleSheet object enumerates these rules. This collection can be accessed even if the style sheet is disabled. Rules are added and removed from the rules collection with add and remove methods on the individual style sheet. A rule that is added to a disabled style sheet will not apply to the document unless the style sheet's disabled property is changed to "false".
The rules in the rules collection are in the source order of the document. Style rules linked in using the "@import" syntax of CSS are expanded in-place in the rules collection per the CSS1 specification.
As rules are added or deleted, a rule's absolute position in the rule collection might change, but its position relative to other rules will remain the same. The default location to add a new rule (without specifying an index) is at the end of the collection, which is the highest precedence (not accounting for selector specificity, as per the CSS specification) and is applied to the document last. If an index is supplied, the rule should be inserted before the rule currently in that ordinal position in the collection, or, if the index is larger than the number of rules in the collection, it should be added to the end.
The following is an example of using the addRule method.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY onclick="newRule()">
<H1>Welcome!</H1>
<P>This document uses style sheets.</P>
<H2>Ways to Include Style Sheets</H2>
<UL>
<LI>LINK
<LI>STYLE
<LI>@import
</UL>
</BODY>
</HTML>
Each rule has a selector, identifying the elements to apply the rule to, and a list of style assignments, identifying the style attributes to apply to these elements. The selector is typically the name of an element, class, or identifier, but can also be a combination of names, such as a comma-separated list of element names. Each style assignment consists of a style attribute name and a value separated by a colon. If there is more than one assignment, the assignments are separated by semicolons. The rule object has a readOnly property that indicates whether the particular rule is from an editable source. Imported and linked styles cannot be edited, so the readOnly property for the contained rule would return "true".
As an example of manipulating style rules, consider the following simple style sheet:
<STYLE
ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
The rules collection would contain two rules. Each rule has two parts (and corresponding properties): the selector and the style. The selector in the first rule in the above style sheet is H1.
alert(document.styleSheets[0].rules[0].selectorText); // this returns "H1"
To change the style of the first rule in the first style sheet, use the following:
document.styleSheets[0].rules[0].style.color = "blue";
Through the Options dialog box of the browser, users can specify a style sheet that they want to have applied to all pages that they view. This style sheet will be applied to the document first, meaning the author has the final say of how a CSS attribute is defined. Style sheets defined in the document override the user-defined style sheet. The user-defined style sheet is simply a "preference" that will affect the page if the author has not defined a rule for that CSS attribute. User-defined style sheets specified by the user in the Options box dialog of the browser are not listed in the styleSheets collection.
Did you find this topic useful? Suggestions for other topics? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top