How to add a CSS Link programmatically using JavaScript

In one of my earlier posts, I demonstrated how to Programmatically Retrieve StyleSheet Url’s Referenced in your Page using JavaScript. In this post, here’s a piece of JavaScript code that demonstrates how you can programmatically reference a CSS link on a page.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title></title>
<
link href="CSS/FloatDes.css" rel="stylesheet"
title="Float layout" type="text/css" />

<
script type="text/javascript">
function
addCSS() {
var headtg = document.getElementsByTagName('head')[0];
if (!headtg) {
return;
}
var linktg = document.createElement('link');
linktg.type = 'text/css';
linktg.rel = 'stylesheet';
linktg.href = 'CSS/RoundCorners.css';
linktg.title = 'Rounded Corners';
headtg.appendChild(linktg);
}
</script>
</
head>
<
body onload="addCSS()">

</
body>
</
html>


The code shown above creates a link element(with properties) and appends it as a child to the &lt;head&gt; section. You can use this technique to let users choose styles and change the appearance of the page.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

7 comments:

Jumler said...

How to do it in an ASP.NET page?

Anonymous said...

@Jumler

I would imagine, but feel free to correct me, server technology ( such as ASP or JSP ) shouldn't have any effect on it.

Essentially, as long as it is present in the browser, it will have HEAD element and thus the above JS will work.

Suprotim Agarwal said...

The HTMLLink class has made it easy to do it in ASP.NET. Check this post http://www.devcurry.com/2009/07/how-to-add-css-programmatically-to.html

Anonymous said...

shouldn't the line:
"headtg.appendChild(link);"

actually read:
"headtg.appendChild(linktg);"

Like this alot, thanks so much for posting!

-AT

Suprotim Agarwal said...

Yes that's a typo and thanks for pointing it out. The code has been updated!

Anonymous said...

How can I make a link to get back to the original CSS?

Wjs Com said...

You can also use wjs library for that :

wjs.use('CssLink', 'yourcss.css');