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

< css‎ | cssom
Jump to: navigation, search

styleSheet

This article is Ready to Use.


Summary

A style sheet in the document.


Properties

API Name Summary
cssRules Gets a list of CSS rules of a style sheet.
cssText Gets or sets the textual representation of a style sheet.
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.
type The type of a document's stylesheet.


Methods

API Name Summary
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.
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.

HTML

<!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































































Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]