How to add a CSS Link programmatically using JavaScript

Posted on July 22, 2009 by News

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(link);
        }
    </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.

This entry was posted in CSS, JavaScript, Syndicated. Bookmark the permalink.

Comments are closed.