cssRule, CSSRule, ruleNN 6 IE 5 DOM 2  

  

A style sheet rule object is a member of the collection of styleSheet objects in the document. The IE and W3C DOMs have different syntax for referencing each of these rule objects. For IE, the reference is via the rules collection (a single object being known as a rule object); for W3C, as implemented in Netscape 6 and IE 5 for the Macintosh, the reference is via the cssRules collection (a single object being known as a cssRule object). Note that the cssRule object is not in the Windows version of IE through Version 6.

 

The corresponding W3C DOM abstract object is called the CSSRule object, but that form of the object name is important only to scripters who wish to modify the prototype properties and methods of the CSSRule object in Netscape 6. The W3C DOM goes further to define special types of CSSRule objects for each of the @ rule types (CSSImportRule, CSSMediaRule, and so on). A member of the cssRules collection can be any one of those types, and is identified as such by its type property. Each type has its own set of properties and/or methods that apply to that cssRule type. In the item property and method listings below, observe the type(s) for which they apply. By and large, however, the inline rules you will script are of the CSSStyleRule type.

 

Use scriptable access to a rule or cssRule object with caution. If you modify a rule's selector or style definition, the changes affect the entire document, and could, with a misplaced colon, ruin other rules in the document. To toggle among two or more styles for a single element, class, or element type, it is generally more reliable and efficient to use other techniques that work with multiple rules (swapping className assignments on elements) or multiple style sheets (enabling and disabling styleSheet objects). But for the sake of the completeness of the object model, the W3C DOM in particular provides full access to style sheet rule pieces if you absolutely need them.

 
Object Model Reference
  
document.styleSheets[i].rules[j]
document.styleSheets[i].cssRules[j]
 
Object-Specific Properties
 
cssRulescssTextencodinghref
mediaparentRuleparentStyleSheetreadOnly
selectorTextstylestyleSheettype
 
Object-Specific Methods
 
deleteRule( )insertRule( )
 
Object-Specific Event Handler Properties

None.

cssRulesNN 6 IE n/a DOM 2  

Read-only  

Returns a collection of cssRule objects nested within an @media rule.

 
Value

Reference to a cssRules collection object.

 
Default

Array of zero length.

 
W3C DOM CSSRule Types
  
CSSMediaRule
cssTextNN 6 IE 5(Mac) DOM 2  

Read/Write  

Indicates the complete text of the style sheet rule, including selector and attribute name/value pairs inside curly braces. IE 6 for Windows provides no equivalent property. In supporting browsers, changes do not influence the object or rendering.

 
Example
  
document.styleSheets[0].cssRules[2].cssText = "td {text-align:center}";
 
Value

String.

 
Default

None.

 
W3C DOM CSSRule Types

All.

encodingNN 6 IE n/a DOM 2  

Read-only  

Returns the character set code (e.g., ISO-8859-1 or UTF-8) associated with an @charset rule.

 
Value

String.

 
Default

None.

 
W3C DOM CSSRule Types

CSSCharsetRule
hrefNN 6 IE n/a DOM 2  

Read-only  

Returns the URI of the external style sheet file imported via an @import rule.

 
Value

String.

 
Default

None.

 
W3C DOM CSSRule Types
  
CSSImportRule
mediaNN 6 IE n/a DOM 2  

Read-only  

Returns the media type specified for an @import or @media rule.

 
Value

String constant for media types supported by the browser (e.g., screen or print).

 
Default

all
 
W3C DOM CSSRule Types
  
CSSImportRule
CSSMediaRule
parentRuleNN 6 IE n/a DOM 2  

Read-only  

Refers to the cssRule object that contains the current cssRule, such as a rule nested inside an @ rule. Accessing this property value can crash Netscape 6.2.

 
Example
  
var superRule = document.styleSheets[0].cssRules[1].parentRule;
 
Value

cssRule object reference.

 
Default

null
 
W3C DOM CSSRule Types

All.

parentStyleSheetNN 6 IE 5(Mac) DOM 2  

Read-only  

Refers to the styleSheet object that contains the current cssRule. Allows a function that might be passed a reference to a cssRule object to obtain a reference to the containing styleSheet object, possibly to learn more about what else is in the style sheet.

 
Example
  
var ss = document.styleSheets[0].cssRules[3].parentStyleSheet;
 
Value

styleSheet object reference.

 
Default

Current object.
 
W3C DOM CSSRule Types

All.

readOnlyNN n/a IE 5 DOM n/a  

Read-only  

Returns Boolean true for rules that arrive to a document via an @import rule or a link element. Such rules may not be modified by script, although an element governed by such a rule can have individual style properties modified because the modifications are made to the element's own style property, and not the rule object.

 
Example
  
if (!document.styleSheets[2].cssRules[0].readOnly) {
    // not read-only, so OK to modify here
}
 
Value

Boolean value: true | false.
 
Default

Varies with rule type.
selectorTextNN 6 IE 5 DOM 2  

Read/Write  

Indicates the selector portion of the style sheet rule. Although this property is read/write (except in IE 5/Mac), changes do not influence the object or rendering.

 
Example
  
document.styleSheets[0].cssRules[2].selectorText = "td.leftHeaders";
 
Value

String.

 
Default

None.

 
W3C DOM CSSRule Types
  
CSSPageRule
CSSStyleRule
styleNN 6 IE 5 DOM 2  

Read/Write  

Returns a style object with properties that reflect the attribute settings of the current rule. This is the same kind of style object associated with elements in the document (corresponding to the W3C DOM CSSStyleDeclaration object). If you must modify style sheet settings at the rule level, do so via the style property of the rule or cssRule. Changes register themselves immediately, and the elements affected by the rule render their changes accordingly.

 
Example
  
var oneRule;
if (document.styleSheets) {
    if (document.styleSheets[0].cssRules) {
        oneRule = document.styleSheets[2].cssRules[1];
    } else if (document.styleSheets[0].rules) {
        oneRule = document.styleSheets[2].rules[1];
    }
}
if (oneRule) {
    oneRule.style.color = "red";
    oneRule.style.fontWeight = "bold";
}
 
Value

Reference to a style (W3C CSSStyleDeclaration) object.

 
Default

Current style object.
 
W3C DOM CSSRule Types
  
CSSFontRule
CSSPageRule
CSSStyleRule
styleSheetNN 6 IE n/a DOM 2  

Read-only  

Returns a reference to the styleSheet object contained by the imported style sheet. From here you can inspect cssRule objects belonging to that styleSheet objectessentially drilling down one more level to the styleSheet object structure of the remote style sheet file.

 
Value

styleSheet object reference.

 
Default

None.

 
W3C DOM CSSRule Types
  
CSSImportRule
typeNN 6 IE n/a DOM 2  

Read-only  

Returns an integer corresponding to one of seven cssRule types, as defined by the W3C DOM. Every cssRule object in Netscape 6 comes equipped with plain-language constant properties corresponding to the rule types, as follows.

 
ConstantEquivalent integer
cssRuleReference.UNKNOWN_RULE 0
cssRuleReference.STYLE_RULE 1
cssRuleReference.CHARSET_RULE 2
cssRuleReference.IMPORT_RULE 3
cssRuleReference.MEDIA_RULE 4
cssRuleReference.FONT_FACE_RULE 5
cssRuleReference.PAGE_RULE 6
 
Example
  
var oneRule = document.styleSheets[2].cssRules[1];
if (oneRule.type == oneRule.IMPORT_RULE) {
    // process @import rule
}
 
Value

Integer.

 
Default

1
 
W3C DOM CSSRule Types

All.

deleteRule( )NN 6 IE n/a DOM 2  

deleteRule(index)

  

Removes the zero-based index numbered rule from the current @media rule.

 
W3C DOM CSSRule Types
  
CSSMediaRule
 
Parameters
 
index

A zero-based integer corresponding to the specified item in source code order.

 
Returned Value

None.
insertRule( )NN 6 IE n/a DOM 2  

insertRule("rule", index)

  

Inserts a new rule (selector text and style attributes) into the current @media rule at the position indicated by the second parameter.

 
W3C DOM CSSRule Types
  
CSSMediaRule
 
Parameters
 
rule

A string containing selector and curly-braced style attributes comprising the rule to be inserted.

index

A zero-based integer corresponding to the specified item in source code order.

 
Returned Value

Integer of inserted position.