Loading Page Styles And JavaScript With JavaScript

2nd July 2008 - 4 minutes read time

One good technique when using JavaScript is to load a single JavaScript file and get this file to load any other JavaScript or CSS documents that are needed. This means that you can simplify the instillation of a script on a page by including a single file, which then loads everything else it needs. Here is how to accomplish such a task.

The basic idea is that you add the references you need to the DOM structure of the document. Let's say that we want to load a CSS file called styles.css. To do this at run time we need to create a <link> element and give it some parameters before adding it onto the end of the <head> element of the page. Here is the code needed to do this.

// create the link element and store it in a variable.
var linkElement = document.createElement("link");
// set the rel attribute of the link element to be stylesheet
linkElement.setAttribute("rel", "stylesheet");
// set the type attribute of the link element to be text/css
linkElement.setAttribute("type", "text/css");
// set the href attribute of the link element to point to the file
linkElement.setAttribute("href", "http://www.example.com/styles.css");
// add the link element to the head of the document.
document.getElementsByTagName("head")[0].appendChild(linkElement);

To do the same thing with JavaScript we just need to change the element and attributes a little. Here is how to load a script file called script.js.

var scriptElement = document.createElement("script");
scriptElement.setAttribute("type","text/javascript");
scriptElement.setAttribute("src","http://www.example.com/script.js");
document.getElementsByTagName("head")[0].appendChild(scriptElement);

You can also streamline this process by creating a function that takes the filename and what sort of file we are trying to load.

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ 
  //if filename is a external JavaScript file
  var theElement = document.createElement("script");
  theElement.setAttribute("type","text/javascript");
  theElement.setAttribute("src", filename);
 }else if(filetype=="css"){
  //if filename is an external CSS file
  var theElement= document.createElement("link");
  theElement.setAttribute("rel", "stylesheet");
  theElement.setAttribute("type", "text/css");
  theElement.setAttribute("href", filename);
 }
 if (typeof element!="undefined"){
  document.getElementsByTagName("head")[0].appendChild(theElement);
 }
};

To use this function do the following.

loadjscssfile("http://www.example.com/script.js","js");

One final note is that the file name must be absolute reference to the file. The rule is, if you can't cut and paste the URL into your browser and get the file then this method isn't going to work.

JavaScript

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
3 + 9 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

Creating A Mouse "Looking" Script With JavaScript

24th November 2024

I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.

Read more

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Read more

Getting Up And Running With Nightwatch.js

24th July 2022

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Read more