SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jan 30, 2008, 07:46 #1
- Join Date
- Nov 2005
- Posts
- 26
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Injecting CSS in style tag into page
Hi,
What I'm working on at the moment is an inline popup to hold a form which should appear above the text on the page and allow a user to interact with the form until they're ready to go back to the main page.
Simple enough, right? Well, the very large spanner in this particular works is that I've been instructed to try and do this as a stand-alone script so that it can just be dumped in any page that needs to use this.
This presents various problems - and I may be a frequent visitor to this forum over the coming days - but what's boiling my swede at the moment is the problem of how to put the css styles required by the popup into the page as part of the javascript package.
I've tried various things. In the following examples, strCSS is some CSS code and bodyNode is the body element captured using getElementsByTagName.
Code:var styleNode = document.createElement("style"); var styleTextNode = document.createTextNode(strCSS); styleNode.appendChild(styleTextNode); bodyNode.appendChild(styleNode);
Code:var styleNode = document.createElement("style"); styleNode.text = strCSS; bodyNode.appendChild(styleNode);
Code:var bodyText = bodyNode.innerHTML bodyNode.innerHTML = strCSS + bodyText;
So now I give up on putting stuff inside a style tag at the top of the page and instead have a pop at setting the style attributes of the tags themselves. In these examples, spanNode is my dynamically created Node which contains all the form stuff I want to appear on the page.
Code:spanNode.setAttribute("style", "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;");
Code:spanNode.style.cssText = "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;"
Anyone got any idea how I can do this? I'd prefer to get the style tags in so I can manipulate className whenever I need to which is by far the neatest way of doing it.
Cheers,
Matt
-
Jan 30, 2008, 09:10 #2
- Join Date
- May 2006
- Location
- Ventura, CA
- Posts
- 2,750
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:var styleNode = document.createElement("style"); styleNode.text = strCSS; bodyNode.appendChild(styleNode);
-
Jan 30, 2008, 09:18 #3
-
Jan 30, 2008, 09:30 #4
- Join Date
- Apr 2006
- Posts
- 802
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE gives Style elements a styleSheet, and allows you to write to its cssText.
Create the style element, check for a styleSheet and use the cssText,
or add the text node to the other browsers.
Code:function addStyle(str,t){ var el= document.createElement('style'); var atts= {type:'text/css',media:'screen'} if(t) atts.title= t; for(var p in atts){ if(atts[p]) el[p]= atts[p]; } if(el.styleSheet) el.styleSheet.cssText= str; else el.appendChild(document.createTextNode(str)); return document.getElementsByTagName('head')[0].appendChild(el); }
Adding a title makes it easier to find the element again, since ids are invalid for style elements (in html).
It is more efficient to add new rules or edit an existing styleSheet using document.styleSheets methods,
but this method is simpler, and more widely supported.
-
Jan 30, 2008, 10:18 #5
- Join Date
- Nov 2005
- Posts
- 26
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks