As JSON and DHTML start to get pushed more and more to the forefront of web-based applications, the web designer is faced with a new problem: how to dynamically insert a script element into an existing web page. It won’t take long to figure out that ajax loads and innerHTML injections won’t work.
The usefulness of being able to dynamically load a style sheet is fairly limited, but there is one very good reason to keep this tool handy: it lets you load a specific stylesheet for a specific browser. Instead of having one massive style sheet for every browser which visits your page, you can break out the stylesheets into browser specific Firefox, IE, Safari, Opera, etc styles which accommodate the eccentricities of each browser and let you serve smaller css files to your visitors to boot.
var headID = document.getElementsByTagName("head"); var cssNode = document.createElement('link'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'FireFox.css'; cssNode.media = 'screen'; headID.appendChild(cssNode);
We get the <head> tag, then create the link and apply the attributes. When it’s all set up we insert the new cssNode into the head section of our webpage where the various styles are instantly applied.
Now when this script has been loaded the .onload event will call a function named scriptLoaded().