September 22, 2001 - Storing Style's Rules in a Collection | WebReference

September 22, 2001 - Storing Style's Rules in a Collection

Yehuda Shiran September 22, 2001
Storing Style's Rules in a Collection
Tips: September 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

You can access style rule definitions in their object form. The STYLE tags are represented in a zero-based collection, document.styleSheets. Each STYLE definition may include one or more rules. Each STYLE definition's rules are represented as a zero-based collection, document.styleSheets[i].rules. If your page looks like this:

<STYLE TYPE="text/css">
.rule1
{
...
}
.rule2
{
...
}
</STYLE>
<STYLE TYPE="text/css">
.rule3
{
....
}
.rule4
{
...
}
</STYLE>
then you'll have two elements in the document.styleSheets collection. The first STYLE definition is stored in document.styleSheets[0], while the second STYLE definition is stored in document.styleSheets[1]. The first STYLE definition includes two rules, rule1 and rule2. They will be stored in the collection document.styleSheets[0].rules. The first rule, rule1, will be stored as document.styleSheets[0].rules[0], while rule2 will be stored as document.styleSheets[0].rules[1]. The length of the rules collection for the first STYLE definition, document.styleSheets[0].rules.length, will be 2. The second STYLE definition's rules, rule3 and rule4, will be modeled in document.styleSheets[1].rules[0] and document.styleSheets[1].rules[1], respectively.