This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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.


See also

Related articles

CSSOM





























































  • styleSheet












Attributions