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 <head> section. You can use this technique to let users choose styles and change the appearance of the page.

About The Author

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?; July 23, 2009 at 8:04 AM
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.; July 23, 2009 at 10:08 PM
Anonymous said...: shouldn't the line:
"headtg.appendChild(link);"

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

Like this alot, thanks so much for posting!

-AT; January 14, 2011 at 2:29 PM
Suprotim Agarwal said...: Yes that's a typo and thanks for pointing it out. The code has been updated!; January 15, 2011 at 6:38 AM
Anonymous said...: How can I make a link to get back to the original CSS?; January 28, 2012 at 2:42 PM
Unknown said...: You can also use wjs library for that :

wjs.use('CssLink', 'yourcss.css');; January 16, 2015 at 7:33 AM