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
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);
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);
- 7/11/2009
- Sean_YahooMail
