How can I load a specific css file in a specific case with JavaScript?

Question

I want to:

// Display loader spinner
// Check if ID or Class exist in HTML Page
// If ID or Class are found, load a specific css file
// Display HTML PAGE

Is it possible?

Answer 1

In JavaScript this how you check if a class exists in a page:

var isClassExist = document.getElementsByClassName('yourClass');
if (isClassExist .length > 0) {
    // elements with class "yourClass" exist
}

And this is how you append a css file to a page:

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

The loader part:

You first have to include your spinner in the html:

<div id="dvReqSpinner" style="display: none;">
    <br />
    <center><img src="~/images/loading_spinner.gif" /></center>
    <br />
</div>

Then in JavaScript (using jQuery):

$("#dvReqSpinner").hide();

Answer 2

See it in action .

 // Let's load the bootstrap CSS, for example. var css_file_path = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?" + (new Date()).getTime(); function show_spinning_loader() { var el = document.createElement("div") el.id = "overlay"; el.innerHTML = '<i class="fa fa-spinner fa-spin spin-small"></i>'; document.body.appendChild(el); } function hide_spinning_loader() { var overlay = document.getElementById("overlay"); if (overlay) { overlay.outerHTML = ""; delete overlay; } } function remove_class(name) { document.body.className = document.body.className .replace(new RegExp('(?:^|\\\\s)' + name + '(?:\\\\s|$)'), ' '); } function css_load_callback(m) { hide_spinning_loader(); remove_class('loading'); }; // Load the stylesheet. var url = css_file_path, head = document.getElementsByTagName('head')[0], link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; // Show the loader. show_spinning_loader(); document.body.className += " loading" // Trigger stylesheet import. head.appendChild(link); // Listen for the DOM onreadystatechange event. if (link.addEventListener) { link.addEventListener('load', function() { css_load_callback(); }, false); }; // Hide loader when done. var cssnum = document.styleSheets.length; var ti = setInterval(function() { if (document.styleSheets.length > cssnum) { css_load_callback(); clearInterval(ti); } }, 10); 

 body.loading * { display: none; } body.loading #overlay { display: block; } #overlay { width: 100%; height: 100%; display: block; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; left: 0; position: absolute; } #overlay i { position: absolute; left: 50%; top: 50%; display: inline-block; vertical-align: middle; text-align: center; } .spin-small { text-align: center; margin: auto; font-size: 20px; height: 20px; width: 20px; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <h2>Twitter Bootstrap</h2> <p>These styles were loaded from bootstrap.</p>