This is one way of loading dynamic CSS and JS. It takes a few files to complete my example, but they all rely on the loader.js.

Here we go ...

Let look at at basic xhtml document with a few extensions:

index.html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Dynamic Script &amp Style Loader</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <link type="text/css" rel="stylesheet" href="baseline.css" />
  <script type="text/javascript" src="generic.js"></script>
  <script type="text/javascript" src="loader.js"></script>
  <script type="text/javascript" src="debug.js"></script>
</head>
  <body>
    <h3>
      My Dynamic Script & Style Loader
    </h3>
    <hr />
    <h4>Let's change styles!</h4>
    <p>
      <button onclick="load_stylesheet('verdana.css')">
        Load the verdana.css stylesheet
      </button>
      <br />
      <button onclick="load_stylesheet('arial.css')">
        Load the arial.css stylesheet
      </button>
      <br />
      <button onclick="load_stylesheet('impact.css')">
        Load the impact.css stylesheet
      </button>
    </p>
    <hr />
    <h4>
      We can change scripts too!
    </h4>
    <p>
      <button onclick="hello()" id="myButton">
        I say "Hello world!!"
      </button>
      <br />
      <button onclick="load_script('hello.js')">
        Change the function of that button   <b>↑</b>
      </button>
    </p>
    <hr />
    <button onclick="stat()">
      Watch the Dynamic Load History
    </button>
  </body>
</html>

The document has a baseline-styling for the buttons:

baseline.css

CODE

body {
  text-align    : center;
}

button {
  width        : 300px;
  padding        : 5px;
  margin        : 10px;
}

This is quite basic xhtml. And this document uses a few JavaScript extensions.

One is a gereric "hello world" script (which we will be replacing dynamically):

generic.js

CODE

//---------------------------------------------------------------------------
// The classic 'Hello World' :
//---------------------------------------------------------------------------
function hello() {
alert('Hello world!!');
}

Now, let's have a look at the actual Script & Stylesheet loader :

loader.js

CODE

//---------------------------------------------------------------------------
//    Check to see if dubugging is enabled :
//---------------------------------------------------------------------------
if(!eval(debug)==true)
  var debug = false;;

//---------------------------------------------------------------------------
//    Let's load some JavaScripts :
//---------------------------------------------------------------------------
function load_script(filename) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = filename;
  document.getElementsByTagName('head')[0].appendChild(script);
  if(debug)
    monitor(dynScripts, filename);
}

//---------------------------------------------------------------------------
//    Let's load some Stylesheets :
//---------------------------------------------------------------------------
function load_stylesheet(filename) {
  var css = document.createElement('link');
  css.rel = 'stylesheet';
  css.type = 'text/css';
  css.href = filename;
  document.body.appendChild(css);
  if(debug)
    monitor(dynStyles, filename);
}

//---------------------------------------------------------------------------
//    Watch the status - IF enabled :
//---------------------------------------------------------------------------
function stat() {
  // IF debugging is enabled, then dump via the dynStatus() function :
  if(debug)
    dynStatus();
  // ELSE say that debugging is disabled ::
  else
    alert('Debug not enabled');
}

Here's the three sample stylesheets that are (or can be) dynamic loaded:

verdana.css

CODE

h3 {
  font-family           : verdana;
  font-size             : 22px;
  font-weight           : bold;
  color                 : #202020;
  letter-spacing        : 5px;
}

body {
  background-color      : #7DA177;
}

arial.css

CODE

h3 {
  font-family           : arial;
  font-size             : 22px;
  font-weight           : bold;
  color                 : #EAEAEA;
  letter-spacing        : 5px;
}

body {
  background-color      : #4B6697;
}

and fianlly impact.css

CODE

h3 {
  font-family           : impact;
  font-size             : 22px;
  font-weight           : normal;
  color                 : #404040;
  letter-spacing        : 5px;
}

body {
  background-color      : #F8E488;
}

Now, let's replace the generic hello world message:

hello.js

CODE

//---------------------------------------------------------------------------
//    Fetch the button that's about to change function :
//---------------------------------------------------------------------------
var myButton = document.getElementById('myButton');

//---------------------------------------------------------------------------
//    Change the label of it :
//---------------------------------------------------------------------------
myButton.innerHTML = 'I now say "Hello YOU!!"';

//---------------------------------------------------------------------------
//    Change the background-color of it :
//---------------------------------------------------------------------------
myButton.style.backgroundColor = '#000000';

//---------------------------------------------------------------------------
//    Change the text color of it :
//---------------------------------------------------------------------------
myButton.style.color = '#EAEAEA';

//---------------------------------------------------------------------------
//    Change the font-weight of it :
//---------------------------------------------------------------------------
myButton.style.fontWeight = 'bold';

//---------------------------------------------------------------------------
//    Replacement hello() message for the button :
//---------------------------------------------------------------------------
function hello() {
  alert('Hello YOU!!');
}

Finally, as an option, you can include the debugger (like in my example index.html):

debug.js

CODE

//---------------------------------------------------------------------------
// Global debugging variable :
//---------------------------------------------------------------------------
var debug = true;

//---------------------------------------------------------------------------
// Global Dynamic Script Name Monitor Array :
//---------------------------------------------------------------------------
var dynScripts = new Array();

//---------------------------------------------------------------------------
// Let's add a label to it :
//---------------------------------------------------------------------------
dynScripts[0] = '\n\nDynamic Scripts History:\n====================';

//---------------------------------------------------------------------------
// Global Dynamic Stylesheet Name Monitor Array :
//---------------------------------------------------------------------------
var dynStyles = new Array();

//---------------------------------------------------------------------------
// Let's add a label to it :
//---------------------------------------------------------------------------
dynStyles[0] = 'Dynamic Styles History:\n====================';

//---------------------------------------------------------------------------
// Log the loaded module names :
//---------------------------------------------------------------------------
function monitor(myArray, value) {
  var next = myArray.length;
  myArray[next] = value;
}

//---------------------------------------------------------------------------
// Alert the status - IF debugging is enabled :
//---------------------------------------------------------------------------
function dynStatus() {
  // Split array elements into seperate lines :
  var output = dynStyles.concat(dynScripts).join('\n');
  alert(output);
}

Hope you find this FAQ useful ...

Happy coding!

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

My FAQ Archive

Come Join Us!

Posting Guidelines

Jobs

Javascript FAQ

DHTML

CODE

CODE

CODE

CODE

CODE

CODE

CODE

CODE

CODE

My Archive

Join Tek-Tips® Today!

Join Tek-Tips^® Today!