CODEWITHSUNDEEP
javascripthtmlcss
Franck Freiburger
Franck Freiburger

Reputation: 28508

how to get a CSSStyleSheet object from a HTMLStyleElement element

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.

Upvotes: 14

Views: 4481

Answers (3)

Jonathan MacQueen
Jonathan MacQueen

Reputation: 176

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.

Upvotes: 11

kennebec
kennebec

Reputation: 104810

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');

Upvotes: 2

cdeszaq
cdeszaq

Reputation: 31300

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.

Upvotes: 0

Related Questions