Including or Importing Style Sheets

There’s no disabled attribute in the markup for a <link> or <style> tag. disabled is a member of an Element node but not an attribute. Note that disabled is not a markup attribute, we can set its value to true only with JavaScript.

If we want a style sheet to be applied to a document only with JavaScript, we create and insert a new <link> or <style> Element node. But there are Internet Explorer pitfalls.

So, let’s code a helper function as below.

The helper function has two parameters.

tag will contain the string "link" or "style".
url will contain the URL of the style sheet.

Next, pass tag to document.createElement(), saving the return value to a local variable named element. Regardless of whether element now contains a <link> or <style>, the type attributes will be "text/css".

function addSheet(tag, url) {
    var element = document.createElement(tag);
    element.type = "text/css";
}

Now append element to childNodes for by way of appendChild().

function addSheet(tag, url) {
    var element = document.createElement(tag);
    element.type = "text/css";

    //append to head
    document.getElementsByTagName("head")[0].appendChild(element);
}

When passed "link" for tag, set rel to "stylesheet" and href to the string in url. The browser will then apply the style sheet to the document. So for a <link>, we’re done.

function addSheet(tag, url) {
    var element = document.createElement(tag);
    element.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(element);

    if (tag === "link") {
        element.rel = "stylesheet";
        element.href = url;
    }
}

If tag contains "style", Firefox, Safari, and Opera, we cobble together an @import directive and pass that to insertRule(). Internet Explorer has a separate method named addImport() for inserting @import directives.

addImport() works with two parameters:

The URL of the style sheet to import. Just pass in the URL for the first parameter no need to cobble together an @import directive.
The second parameter, which is optional, is the numeric index for where to insert the directive in imports.

Note

imports is where Explorer puts @import directives. That is to say, those are kept separate from the rule sets in rules.

Let’s code these two paths inside a try catch statement. The try block will work in Firefox, Safari, and Opera but will generate an error in Internet Explorer, which will then go down the catch path and add addImport() for Internet Explorer.

Our final code for addSheet() is as follows.

snippet

function addSheet(tag, url) {
    var element = document.createElement(tag);
    element.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(element);
    if (tag === "link") {
        element.rel = "stylesheet";
        element.href = url;
    } else if (tag === "style") {
        try {
            element.sheet.insertRule("@import url(" + url + ")", 0);
        } catch (e) {
            element.styleSheet.addImport(url);
        }
    }
}

To delete the <link> if it is already existing just invoke removeChild().

document.getElementsByTagName("head")[0].removeChild(document.getElementsByTagName("link")[0]);

Insert a new <link> with url eight.css with the help of addSheet().

addSheet("link", "eight.css");

Insert a <style> with an @import directive with the help of addSheet().

addSheet("style", "eight.css");