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: [stackoverflow.com/questions/524696/… [1]: stackoverflow.com/questions/524696/…netadictos– netadictos2012-01-18 16:37:33 +00:00Commented Jan 18, 2012 at 16:37
-
thanks netadictos, but the topic is slightly differentFranck Freiburger– Franck Freiburger2012-01-18 16:40:10 +00:00Commented Jan 18, 2012 at 16:40
-
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– noob2012-01-18 17:02:56 +00:00Commented Jan 18, 2012 at 17:02
Add a comment
|
3 Answers
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.
1 Comment
Max Starkenburg
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.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');
1 Comment
Jack G
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.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.