styleSheet

Summary

A style sheet in the document.

Properties

cssRules: Gets a list of CSS rules of a style sheet.

cssText: Gets or sets the textual representation of a style sheet.

ownerNode: Returns an element's corresponding link or style node. See Notes.

ownerRule: Gets the CSS Rule that imported the style sheet, if any.

owningElement: Non standard. Returns the style or link object that defined the style sheet.

pages

parentStyleSheet: Retrieves an element's parent style sheet.

readOnly: Non standard. Indicates if the style sheet is currently in read only mode.

rules: A collection of rules in a document's stylesheet.

title: A string used to identify a stylesheet.

type: The type of a document's stylesheet.

Methods

addPageRule: Not implemented anywhere. Non standard.

addImport: Non standard. Adds an @import rule to the style sheet.

blockDirection

deleteRule: Deletes a CSS rule from the style sheet.

insertRule: Adds a new CSS rule to the stylesheet.

removeImport: Non standard. Removes an @import rule from the style sheet.

removeRule: Non standard. Removes a rule from a style sheet.

Events

No events.

Examples

This example uses the styleSheet object to change the cascading style sheets (CSS) values of inline and imported styles.

<!doctype html>
<html>
 <head>
  <title></title>
  <style>
BODY {background-color: #CFCFCF;}
@import url("otherStyleSheet.css");
  </style>
  <script>
window.onload=fnInit;
function fnInit() {
   // Access a rule in the styleSheet, change backgroundColor to blue.
   var stylesheet = document.styleSheets[0];
   var rule = stylesheet.rules[0];
   rule.style.backgroundColor = "#0000FF";
   // Add a rule for P elements to have yellow backgrounds.
   stylesheet.addRule("P", "background-color: #FFFF00;");
   // Change and imported rule:
   stylesheet.imports[0].color = "#000000";
}
  </script>
 </head>
 <body>
 </body>
</html>

Notes

You can use this object to retrieve style sheet information, such as the URL of the source file for the style sheet and the element in the document that owns (defines) the style sheet. You can also use it to modify style sheets. You can retrieve a styleSheet object from the styleSheets collection or from the imports collection. Each item in these collections is a style sheet. A styleSheet object is available for a style sheet only if it is included in a document with a style or link element, or with an @import statement in a style element.

Non Standard Methods

The styleSheet object has these methods.

Method	Description
addRule	Non standard. Creates a new rule for a style sheet.
fireEvent	Fires a specified event on the object.

Non Standard Properties

The styleSheet object has these properties.

Property	Description
disabled	Sets or retrieves a value that indicates whether the user can interact with the object.
href	Sets or retrieves the URL of the linked style sheet.
id	Sets or retrieves the string identifying the object.
isAlternate	Retrieves a value that indicates whether the styleSheet object is an alternative style sheet.
isPrefAlternate	Retrieves a value that indicates whether the style sheet is the preferred style sheet.
media	Sets or retrieves the media type.
ownerNode	Retrieves the node that associates this style sheet with the document.
parentStyleSheet	Retrieves the style sheet that imported the current style sheets.
textAutospace	Sets or retrieves the autospacing and narrow space width adjustment of text.
title	Sets or retrieves the title of the style sheet.
type	Retrieves the CSS language in which the style sheet is written.

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]