how to write a code in javascript that conditionally loads 2 different css files?

Question

how to write a code in javascript that conditionally loads 2 different css styles I need to load a different css style for a page while it is loading and after it has loaded. i.e

if(condition)
{load 1 css};
else 
{load another css};

Answer 1

You should be aware of the <link> tag's disabled feature.

<link rel="stylesheet" disabled="disabled" />

So, in your case, let us assume there are two stylesheets, day.css and night.css:

<link rel="stylesheet" href="day.css" id="day" />
<link rel="stylesheet" href="night.css" id="night" />

In your code, once you load, you can do this:

if (condition)
    document.getElementById('day').setAttribute("disabled", "disabled");

In case, you are using jQuery, it is more simpler! Use this:

if (condition)
{
    $("#day").prop("disabled", true);
    $("#night").prop("disabled", false);
}
else
{
    $("#day").prop("disabled", false);
    $("#night").prop("disabled", true);
}