loadCSS implements a variant on the 'Script-Tag Hack' (by rights, the 'Link-Tag Hack'), and loads a style-sheet from the URL that is passed to it. While it seems unlikely that many applications would find loadCSS to be useful, it is included in the libraries available here for the sake of completeness.
When invoked it creates a <link> element dynamically, and sets that element's src attribute to the value of the URL supplied by the caller. It inserts the element into the DOM hierarchy for the page, which causes the browser to download and evaluate the style-sheet as if it had been included in the page statically.
Downloading CSS code in this fashion does not suffer from the potential security problems of the Script-Tag Hack because CSS is declarative not imperative (in other words, it has no concept of 'procedure').
Product Version: 1.0
Tutorial Version: 1.1
API Doc. Version: 2.0
Using loadCSS is a simple matter of calling the function, passing it the URL of the desired CSS file as a string; and Example 1 illustrates this. Here, clicking on the client area of the browser window causes the onClick event handler to execute, which calls loadCSS before continuing.
Note that style-sheet loading is asynchronous, meaning that the call to loadCSS may return before the file has been retrieved from the server. This means that attempts to access and manipulate the attributes of a given element's Style object subsequent to a call to loadCSS may fail. Proprietary steps must therefore be taken to guard against this, as JavaScript does not support a native synchronisation mechanism.
/*
Contents of Red.css */
body { background-color : #FFFAFA; }
h3 { color : #B00000; }
p { color : #900000; }
/*
Contents of Green.css */
body { background-color : #FAFFFA; }
h3 { color : #00B000; }
p { color : #009000; }
/*
Contents of Blue.css */
body { background-color : #FAFAFF; }
h3 { color : #0000B0; }
p { color : #000090; }
<!-- Example 1 -->
<html>
<head>
<script type = "text/javascript" src = "loadCSS.js"></script>
<script type = "text/javascript">
// Example 1
function onClick (FileName)
{
loadCSS (FileName + ".css");
}
</script>
<title></title>
</head>
<body>
<h1>loadCSS Tutorial - Example 01</h1>
<p>Click a Button to Render in Different Shades</p>
<input type = "button" value = "Red" onclick = "onClick ('Red')" />
<input type = "button" value = "Green" onclick = "onClick ('Green')"/>
<input type = "button" value = "Blue" onclick = "onClick ('Blue')" />
</body>
</html>
