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};

And why would you load a different stylesheet when the page is loading, that makes no sense ? — adeneo
– adeneo, Commented Sep 17, 2014 at 10:27

Praveen Kumar Purushothaman · Accepted Answer · 2014-09-17 10:27:57Z

6

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

answered Sep 17, 2014 at 10:27

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fmsf Over a year ago

you where way faster than me to point the disabled feature so +1

Praveen Kumar Purushothaman Over a year ago

Ha ha... Thanks, and I also took time to edit and format the question! :P

Matyas · Accepted Answer · 2014-09-17 10:32:42Z

0

Alternative (jQuery based) solution:

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
    if (YOUR_CONDITION) {
        $(document.head).append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">');
    }
  </script>
</head>
<body>
  <h1>Hello world</h1>
</body>

Live demo

Compared to the disabled based solutions this only loads one CSS.

answered Sep 17, 2014 at 10:32

Matyas

13.7k3 gold badges66 silver badges77 bronze badges

Comments

VPK · Accepted Answer · 2014-09-17 10:59:10Z

-1

Please use dynamic insertion of CSS file. refer code below.

function loadcssfile(filename){
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
    if(condition1)
        loadcssfile("mystyle1.css") ////dynamically load and add this .css file
    else if(condition2)
        loadcssfile("mystyle2.css") ////dynamically load and add this .css file`

edited Sep 17, 2014 at 10:59

VPK

3,0781 gold badge30 silver badges36 bronze badges

answered Sep 17, 2014 at 10:29

snehatulsi

2471 silver badge12 bronze badges

1 Comment

Pekka Over a year ago

Hi, using code you haven't written yourself without attribution isn't encouraged on Stack Overflow.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Live demo

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related