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.






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

6 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.

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?

Unknown said...

You can also use wjs library for that :

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