Injecting CSS in style tag into page

[mattDP]

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.

var styleNode = document.createElement("style");
var styleTextNode = document.createTextNode(strCSS);
styleNode.appendChild(styleTextNode);
bodyNode.appendChild(styleNode);

Which fails because IE won't allow one to append nodes to a style tag.

var styleNode = document.createElement("style");
styleNode.text = strCSS;
bodyNode.appendChild(styleNode);

Which I saw suggested on Quirksmode, but it doesn't work. No great surprise since .text isn't a property I recognise.

var bodyText = bodyNode.innerHTML
bodyNode.innerHTML = strCSS + bodyText;

This is ugly, but I was at least expecting it to work, but it doesn't seem to. The elements in the page with the appropriate class names don't pick up the styling.

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.

spanNode.setAttribute("style", "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;");

Doesn't seem to work because - you guessed it - IE won't allow you to setAttribute on a style attribute. I'm starting to feel like Bill Gates hates me, personally at this point.

spanNode.style.cssText = "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;"

This is the suggested workaround. Doesn't seem to work either.

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

[chris_fuel]

var styleNode = document.createElement("style");
styleNode.text = strCSS;
bodyNode.appendChild(styleNode);

Doesn't work or doesn't work in all browsers? .text is not cross platform compatible. One type uses .text, the other uses .innerText.

[Pepejeria]

spanNode.style.cssText = "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;"

This is the suggested workaround. Doesn't seem to work either.

That should work fine in IE, Firefox, Opera and Safari. Note though, that this will remove any existing CSS that the element might already have.

[mrhoo]

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.

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

call it with any valid css string argument, exactly as you would write it in a style sheet.

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.

[mattDP]

That should work fine in IE, Firefox, Opera and Safari. Note though, that this will remove any existing CSS that the element might already have.

You're right - it does work. Thanks for this. and for the clarification that it's cross-browser. My prep up to that point had a vital flaw that was making it fail

Thanks also for the heads-up on injecting css classes into the page. Very useful.