dom.style.css.CSSStyleSheet

	Property	Defined By
		DOM 2 Style cssRules : CSSRuleList [read-only] The list of all CSS rules contained within the style sheet.	CSSStyleSheet
		DOM 2 Style disabled : Boolean [read-only] This property indicates whether the current stylesheet is applied or not.	StyleSheet
		DOM 2 Style href : DOMString [read-only] If the style sheet is a linked style sheet, the value of its attribute is its location.	StyleSheet
		DOM 2 Style media : DOMString Specifies the intended destination medium for style information.	StyleSheet
		DOM 2 Style ownerNode : Node [read-only] The node that associates this style sheet with the document.	StyleSheet
		DOM 2 Style ownerRule : CSSRule [read-only] If this style sheet comes from an @import rule, the ownerRule attribute will contain the CSSImportRule.	CSSStyleSheet
		DOM 2 Style parentStyleSheet : StyleSheet [read-only] For style sheet languages that support the concept of style sheet inclusion, this attribute represents the including style sheet, if one exists.	StyleSheet
		Non-Standard rules : CSSRuleList [read-only] Retrieves a collection of rules defined in a style sheet.	CSSStyleSheet
		DOM 2 Style title : DOMString [read-only] The advisory title.	StyleSheet
		DOM 2 Style type : DOMString [read-only] This specifies the style sheet language for this style sheet.	StyleSheet

	Method	Defined By
		Non-Standard addImport(url:DOMString, indexRequest:Number):Number Adds a style sheet to the imports collection for the specified style sheet.	CSSStyleSheet
		Non-Standard addPageRule(selector:DOMString, style:DOMString, index:Number = -1):Number Creates a new page object for a style sheet.	CSSStyleSheet
		Non-Standard addRule(selector:DOMString, style:DOMString, index:Number = -1):Number Creates a new rule for a style sheet.	CSSStyleSheet
		DOM 2 Style deleteRule(index:Number):void Used to delete a rule from the style sheet.	CSSStyleSheet
		DOM 2 Style insertRule(rule:DOMString, index:Number):Number Used to insert a new rule into the style sheet.	CSSStyleSheet
		Non-Standard removeImport(index:Number):void Removes the imported style sheet from the imports collection based on ordinal position.	CSSStyleSheet
		Non-Standard removeRule(index:Number):void Deletes an existing style rule for the styleSheet object, and adjusts the index of the rules collection accordingly.	CSSStyleSheet

Property Detail

DOM 2 Style cssRules

property

cssRules:CSSRuleList [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

The list of all CSS rules contained within the style sheet. This includes both rule sets and at-rules.

Implementation
public function get cssRules():CSSRuleList

Example

         // get the first style sheet’s first rule
         first_rule = document.styleSheets[0].cssRules[0];

DOM 2 Style ownerRule

property

ownerRule:CSSRule [read-only]

If this style sheet comes from an @import rule, the ownerRule attribute will contain the CSSImportRule. In that case, the ownerNode attribute in the StyleSheet interface will be null. If the style sheet comes from an element or a processing instruction, the ownerRule attribute will be null and the ownerNode attribute will contain the Node.

Implementation
public function get ownerRule():CSSRule

rules

property

rules:CSSRuleList [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Retrieves a collection of rules defined in a style sheet.

Note (IE): IE doesn't count @imports as rules, but splits up selectors like p#test, ul into two rules.

Implementation
public function get rules():CSSRuleList

Example

         <html>
             <head>
                 <script>
                     function ruleColor(ruleIndex) {
                         alert("The color of rule " + ruleIndex + " is " +
                         document.styleSheets[0].rules.item(ruleIndex).style.color + ".");
                     }
                 </script>
         
                 <style>
                     .rule0 {color:"red"}
                     .rule1 {color:"blue"} 
                 </style>
             </head>
         
             <body>
                 <p class="rule0" id="oRule0Span">
                     Rule 0 is applied to this line.
                 </p>
                 <p class="rule1" id="oRule1Span">
                     Rule 1 is applied to this line.
                 </p>
         
                 <button onclick="ruleColor(0)">Color of Rule 0</button> 
         
                 <button onclick="ruleColor(1)">Color of Rule 1</button>
         
             </body>
         </html>

Method Detail

addImport

()

method

public function addImport(url:DOMString, indexRequest:Number):Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Adds a style sheet to the imports collection for the specified style sheet.

Note (IE): Whether a CSS import is made in a CSS file itself (by using @import) or dynamically by JavaScript, the limit per stylesheet is 31. Beyond that number, all other imports in that stylesheet will be ignored. Additionally, when trying to add an import by JavaScript, the browser will return an "Invalid argument" error.

Parameters

	`url:DOMString` — Specifies the location of the source file for the style sheet.

	`indexRequest:Number` — (Optional) Specifies the requested position for the style sheet in the collection. If this value is not given, the style sheet is added to the end of the collection.

Returns

Number — Returns a a zero-based index value indicating the position of the imported style sheet in the imports collection.

See also

MSDN: addImport Method

addPageRule

()

method

public function addPageRule(selector:DOMString, style:DOMString, index:Number = -1):Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Creates a new page object for a style sheet.

Note (IE): Each page object represents a style sheet that corresponds to a @page rule in the document.

Parameters

	`selector:DOMString` — Specifies the selector for the new page object.

	`style:DOMString` — Specifies the style assignments for this page object. This style takes the same form as an inline style specification. For example, "color:blue" is a valid style parameter.

	`index:Number` (default = `-1`) — Specifies the zero-based position in the pages collection where the new page object should be placed.

Returns

Number — Reserved. Always returns -1.

See also

MSDN: addPageRule Method

addRule

()

method

public function addRule(selector:DOMString, style:DOMString, index:Number = -1):Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Creates a new rule for a style sheet.

Note (IE): You can add up to 4095 style rules with the addRule method. After that, the method returns an "Invalid Argument" exception.

Note (IE): You can apply rules to a disabled styleSheet, but they do not apply to the document until you enable the styleSheet.

Parameters

	`selector:DOMString` — Specifies the selector for the new rule. Single contextual selectors are valid. For example, "div p b" is a valid contextual selector.

	`style:DOMString` — Specifies the style assignments for this style rule. This style takes the same form as an inline style specification. For example, "color:blue" is a valid style parameter.

	`index:Number` (default = `-1`) — (Optional) Specifies the zero-based position in the rules collection where the new style rule should be placed.

Returns

Number — Reserved. Always returns -1.

Example

         <style>
         </style>
         
         <div>
             Internet Explorer makes <b>HTML</b> dynamic.
         </div>
         
         <script>
             var new_rule;
             new_rule = document.styleSheets[0].addRule("div b", "color:blue", 0);
         </script>

DOM 2 Style deleteRule

()

method

public function deleteRule(index:Number):void

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Used to delete a rule from the style sheet.

Parameters

index:Number — The index within the style sheet's rule list of the rule to remove.

Throws

	`DOMException` — INDEX_SIZE_ERR: Raised if the specified index does not correspond to a rule in the style sheet's rule list.

	`DOMException` — NO_MODIFICATION_ALLOWED_ERR: Raised if this style sheet is readonly.

Example

myStyles.deleteRule(0);

DOM 2 Style insertRule

()

method

public function insertRule(rule:DOMString, index:Number):Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Used to insert a new rule into the style sheet. The new rule now becomes part of the cascade.

Parameters

	`rule:DOMString` — The parsable text representing the rule. For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content.

	`index:Number` — The index within the style sheet's rule list of the rule before which to insert the specified rule. If the specified index is equal to the length of the style sheet's rule collection, the rule will be added to the end of the style sheet.

Returns

Number — The index within the style sheet's rule collection of the newly inserted rule.

Throws

	`DOMException` — HIERARCHY_REQUEST_ERR: Raised if the rule cannot be inserted at the specified index e.g. if an @import rule is inserted after a standard rule set or other at-rule.

	`DOMException` — INDEX_SIZE_ERR: Raised if the specified index is not a valid insertion point.

	`DOMException` — NO_MODIFICATION_ALLOWED_ERR: Raised if this style sheet is readonly.

	`DOMException` — SYNTAX_ERR: Raised if the specified rule has a syntax error and is unparsable.

Example

         // push a new rule onto the top of my stylesheet
         myStyle.insertRule("#blanc { color: white }", 0);

removeImport

()

method

public function removeImport(index:Number):void

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Removes the imported style sheet from the imports collection based on ordinal position.

Parameters

index:Number — Indicates which imported style sheet to remove.

See also

MSDN: removeImport Method

removeRule

()

method

public function removeRule(index:Number):void

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.5

3.0

3.1

4.0

1.0

2.0

9.62

10.0b

Non-standard

Deletes an existing style rule for the styleSheet object, and adjusts the index of the rules collection accordingly.

Note (IE): The page does not automatically reflow when the rule is removed. To see the change, you must reflow the page. You can reflow the objects affected using a number of methods. For example, you can reflow the style change only on affected text by setting the text equal to itself. Alternately, you can reload the entire page using the reload method. When you use the refresh method on a table, its content is reflowed.

Parameters

index:Number — (Optional) Specifies the index value of the rule to be deleted from the style sheet. If an index is not provided, the first rule in the rules collection is removed.

Example

This example uses the removeRule method to delete a rule from the rules collection, which causes the text to reflow according to the new rules.

         <STYLE>
             P {color:green}
         </STYLE>
         ...
         <SCRIPT>
             function removeTheRule() {
                 // Style sheets and rules are zero-based collections; therefore,
                 // the first item is item 0 in the collection.
                 var iSheets = document.styleSheets.length;
                 var iRules = document.styleSheets[iSheets-1].rules.length;
                 // make sure there is a rule to delete
                 if (1 < iRules) {            
                     document.styleSheets[iSheets-1].removeRule(1);
                     // Force the page to render the change.
                     oEffectRules.innerHTML=oEffectRules.innerHTML;
                 }
             }
         </SCRIPT>
         ...
         <P ID=oEffectRules>This text has the new style applied to it.</P>
         ...
         <BUTTON onclick="removeTheRule()">Remove the new rule.</BUTTON>

Mon Aug 17 2009, 10:08 AM -04:00

DOM Reference Manual		All Packages \| All Classes \| Index \| Frames No Frames
CSSStyleSheet	Properties \| Methods

Package	dom.style.css
Class	public class CSSStyleSheet
Inheritance	CSSStyleSheet StyleSheet Object