how to get a CSSStyleSheet object from a HTMLStyleElement element

Question

Is it possible to get the CSSStyleSheet object (document.styleSheets[0]) from a HTMLStyleElement (document.createElement('style')) ?

I would like to dynamically add css rules to a not-inserted-in-the-document-yet <style> element.

Here you have the answer: [http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript][1] [1]: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript — netadictos, Jan 18 '12 at 16:37
I think you can clone the document remove the style-sheets from the clone and add the new one and get the object and remove the document clone again. — noob, Jan 18 '12 at 17:02

Jonathan MacQueen · Answer 1 · 2014-07-09T20:17:15.257

9

It is possible to get a CSSStyleSheet object from a <style> element.

var style = document.createElement('style');
document.head.appendChild(style);
var styleSheet = style.sheet // Will give you the associated CSSStyleSheet

This will only work after the <style> element has been appended to the document.

Not exceptionally well documented and very difficult to find by poking around in console.

edited Jul 09 '14 at 20:17

answered Jul 09 '14 at 19:25

Jonathan MacQueen

146
1
6

I think you could get around applying to the primary document first by making another: `var newDoc = document.implementation.createHTMLDocument(); newDoc.head.appendChild(myStyleElement)`. In FF, it's apparently enough to then get `newDoc.styleSheets[0].cssRules`, but Chrome was returning undefined, so I had to get myStyleElement as an element, then I could tack on `.sheet.cssRules`. (Haven't looked at other browsers, since my project is just a userscript.) But yes, crazy how little I could find about this `.sheet` property. – Max Starkenburg Apr 01 '16 at 00:42

kennebec · Accepted Answer · 2012-01-18T17:09:08.907

You can add rules before you add the style element to the document.

A couple notes-

Older IE browsers cannot add child nodes to a style element, so assign to the element's styleSheet.csstext property for them. Make sure you append the new element to the head of the document.

function addStyle(css, media1, title1){
    var el= document.createElement('style');
    el.type= 'text/css';
    if(media1) el.media= media1;
    if(title1) el.title= title1;
    if(el.styleSheet) el.styleSheet.cssText= css;//IE
    else{
        el.appendChild(document.createTextNode(css));
    }
    //return el without the next line if you want to append it later
    return document.getElementsByTagName('head')[0].appendChild(el);

}

var cs1= [
    '#yw_psq, #yw_psq h2{background-color: green; color: white;}',
    '#yw_psq_div{margin: 1ex; position: relative; text-align: center;}',
    '#ps_counter{color: white; margin: 1ex 0 0 0; text-align: center;}',
    '#pzsq_grid  button{cursor: pointer; font-size: 1.2em; width: 100%;}',
    '#delaySpan{font-weight: bold; margin-left: 1em;}'
]

addStyle(cs1.join('\n'),'screen','yw_psq');

`document.createElement("style")` will not work in XHTML5 documents because it will create an element with no namespace, meaning that the element will only inherit its properties from the HTMLElement interface, and thus it will be basically a blank element with no special properties. To fix this problem, you must use `document.createElementNS("http://www.w3.org/1999/xhtml", "style")` for it to work in XHTML5 documents. — Jack G, Dec 21 '17 at 17:17

score 0 · Answer 3 · answered Jan 18 '12 at 16:36

If you have access to the element to-be-inserted, you can add style info to it just like any other element. Once the element is inserted, the browser will re-flow the page and will pick up on any relevant CSS rules that apply. You don't need access to the stylesheet to style an element, you just need access to the element.

how to get a CSSStyleSheet object from a HTMLStyleElement element

3 Answers3