| Package | dom.style.css |
| Class | public class CSSStyleSheet |
| Inheritance | CSSStyleSheet  StyleSheet Object |
All browser compatibility information was obtained via Quirksmode.
See also
| 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 | ||
|---|---|---|---|
Adds a style sheet to the imports collection for the specified style sheet. | CSSStyleSheet | ||
Creates a new page object for a style sheet. | CSSStyleSheet | ||
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 | ||
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 | ||
| DOM 2 Style cssRules | property |
Hide Inherited Public Properties
Show Inherited Public PropertiescssRules: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.
public function get cssRules():CSSRuleListSee also
// 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.
public function get ownerRule():CSSRuleSee also
| 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.
public function get rules():CSSRuleListSee also
<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>| 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.
|
Number — Returns a a zero-based index value indicating the position of the imported style sheet in the imports collection.
|
See also
| 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) |
Number — Reserved. Always returns -1.
|
See also
| 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) |
Number — Reserved. Always returns -1.
|
See also
<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.
|
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.
|
See also
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.
|
Number — The index within the style sheet's rule collection of the newly inserted rule.
|
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.
|
See also
// 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
| 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.
|
See also
<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>