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();