Methods


createStyleSheet Method

Creates a style sheet for the document.

Syntax

oStylesheet = object.createStyleSheet( [sURL] [, iIndex])

Parameters

sURL Optional. A String that specifies how to add the style sheet to the document. If a file name is specified for the URL, the style information is added as a link object. If the URL contains style information, it is added to the style object.
iIndex Optional. A Integer that specifies the index that indicates where the new style sheet is inserted in the styleSheets collection. The default is to insert the new style sheet at the end of the collection.

Return Value

Returns a styleSheet object.

Remarks

You can create up to 31 styleSheet objects with the createStyleSheet method. After that, the method returns an "Invalid Argument" exception. To create additional objects, use createElement and append them to the HEAD of the document as follows: 

var styleSheet = document.createElement('STYLE');
document.documentElement.firstChild.appendChild(styleSheet);

Example

This example uses the createStyleSheet method to create a link to a style sheet.

document.createStyleSheet('styles.css');

Standards Information

There is no public standard that applies to this method.

Applies To

document, HTMLDocument Constructor
Tags :


Community Content

Sean_YahooMail
Notes about adding style sheets dynamically with STYLE Tag
1.) You cannot set the .innerHTML, .innerText, or .text property of a STYLE element created dynamically. You must use .styleSheet.cssText.

Example:
var ss = document.createElement("STYLE");
var rules = " * { font-weight: 900; } "; // this is the best way to do it in batch, rather than calling addRule, addRule, addRule
ss.styleSheet.cssText = rules; //here is the property that you can use
document.getElementsByTagName("head")[0].appendChild(ss);


2.) IE has an sort of unknown feature with createElement that allows you to set attributes on the style tag automatically. However doing this will cause the tag's styleSheet object to be null.

Example Good:
//This will work great. . .

var ss = document.createElement("STYLE");
var rules = " * { font-weight: 900; } ";

ss.setAttribute("id", "myStyleSheet");
ss.setAttribute("type", "text/css");
ss.styleSheet.cssText = rules;
document.getElementsByTagName("head")[0].appendChild(ss);

Example Bad:
//This will fail. . .

var ss = document.createElement("<style type='text\/css' id='myStyleSheet'><\/style>");
var rules = " * { font-weight: 900; } ";
ss.styleSheet.cssText = rules; //THIS WILL FAIL. . . (the .styleSheet property will be null). I believe this to be a bug with IE b/c its creates a document fragment when doing createElement with HTML strings.
document.getElementsByTagName("head")[0].appendChild(ss);



Page view tracker