Load an external stylesheet using JavaScript

There are times when you may not want to load a CSS file on page load, especially if it is a large file.

You can load that external file using only JavaScript.

Here’s how…

We will have two functions, loadCss() and removeCss().

loadCss() will append a CSS file using the <link> tag.
removeCss() removes it.

Parameter(s) are passed to the functions, enabling their usage for manipulating multiple files.

loadCss() gets passed a file and Id parameter. The Id is used to make the appended file unique and also enable us to remove it, if desired.

loadCss("/yourpath_to_css/dynamic.css","dynamic-css")

removeCss() gets passed an Id parameter:

removeCss("dynamic-css")

JavaScript

function loadCss(f,i){
	var _c = document.getElementById(i);
	//assures we don't add the same file again
	if( f !== "" && (typeof(_c) === 'undefined' || _c === null) ){
		var _e = document.createElement('link');
		_e.rel = "stylesheet";
		_e.type = "text/css";
		_e.href = f;
		_e.id = i;
		document.body.appendChild(_e);
	}
}

function removeCss(i){
	var _c = document.getElementById(i);
	if (typeof(_c) !== 'undefined' && _c !== null){
		document.body.removeChild(_c);
	}
}

Put it all together and you can see the working example here.

Tested in:
FF 3.6+, Safari, Chrome, IE8+
iOS

Great books are available on JavaScript and jQuery.