Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use
setAttribute unfortunately IE6 doesn't support it consistently.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
var head = document.getElementsByTagName('head');
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
This example checks if the CSS was already added so it adds it only once.
head element based on the filename portion of the URL:
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" ).appendChild( link );
Insert the code just before the closing
.js) file will cause a Flash of unstyled content (FOUC) to appear.