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

Share:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Twitthis
This entry was posted in CSS, JavaScript, Syndicated. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree