Dynamically changing Cascading Style Sheets (CSS) styles that are applied to documents is not limited to the inline styles (styles defined on HTML elements 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.
This topic includes the following sections.
Accessing Style Sheets through Script
Global style sheets are made available 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 attribute of "text/css." (Style sheets of other types are not supported.) Style sheets can also be imported within a STYLE element, using the @import rule.
Both STYLE and LINK elements can be added to the document through the createElement method on the document object. This method adds a new styleSheet object to the styleSheets collection on the document. Style rules and imported style sheets can then be added to this style sheet with the addRule and addImport methods.
You can also use identifiers to access style sheets in the document by setting the ID attribute of the LINK or STYLE element.
Replacing Style Sheets
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 rule. The href property is null for style sheets defined using the STYLE element.
Disabling Style Sheets
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 prevent 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.
Dynamically Changing Style Sheet Rules
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 addRule and removeRule methods of the styleSheet object. 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 imported with the @import syntax of CSS are expanded in place in the rules collection per the CSS, Level 1 (CSS1) specification.
A rule's absolute position in the rules collection might change as rules are added or removed, but its position relative to other rules remains 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 is inserted before the rule currently in that ordinal position in the collection. If the index is larger than the number of rules in the collection, it is 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 >
<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>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
A style rule begins with a selector that identifies the elements to apply the rule to, and includes a list of style declarations that specify the style attributes which are applied to that element. The selector may be an element name, class, or identifier; or it may be a combination of names, such as a comma-separated list of element names, pseudo-classes, and pseudo-elements. Each style declaration 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. (For more information on selectors, see Understanding CSS Selectors.) 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 selectorText and the style object. 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";
User-Defined Style Sheets
Users can specify a style sheet to apply to all pages that they view through the Internet Options dialog box, Accessibility options. This "user" style sheet is applied to the document first, meaning the page author has the final say of how a CSS attribute is defined. To override the author's style sheet, append "!important" to the user's style declarations; otherwise, the user-defined style sheet is simply a "preference" that affects the page if the author has not defined a rule for that CSS attribute.
User-defined style sheets are not included in the styleSheets collection.