Load css by date with javascript

Question

I'm looking to load different css files according to the date (season).

I tried modifying an image script from here on stackoverflow, but that didn't work.

Can anybody point me out where it goes wrong?

<link href="/css_season/default.css" rel="stylesheet" type="text/css" onload="logo(this)">

function logo(link) {
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 4 && (Today >= 1 && Today <= 30)) {
    src = "/css_season/easter.css";
  } else if (Month === 7 && (Today >= 1 && Today <= 31)) {
    src = "/css_season/vacation.css";
  } else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2)) {
    src = "/css_season/vacation.css";
  } else if (Month === 12 && (Today >= 15 && Today <= 31)) {
    src = "/css_season/holidays.css";
  } 
  link.href=href;
}

This might help stackoverflow.com/questions/3744270/dynamically-loading-css — rene
– rene, Commented Dec 28, 2012 at 9:50

fbynite · Accepted Answer · 2012-12-28 11:04:11Z

1

Your assignment link.href=href won't work because href isn't defined. Also, I would put the logo function in <body onload="logo();"> and give your link tag an id attribute.

This should work for you:

<html>
<head>
<link id="cssId" href="/css_season/default.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="logo();">
 <!-- body content here -->
</body>

function logo() {
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 4 && (Today >= 1 && Today <= 30))
    src = "/css_season/easter.css"; 
  else if (Month === 7 && (Today >= 1 && Today <= 31))
    src = "/css_season/vacation.css";
  else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2))
    src = "/css_season/vacation.css";
  else if (Month === 12 && (Today >= 15 && Today <= 31))
    src = "/css_season/holidays.css";

  document.getElementById('cssId').href=src;
}

edited Dec 28, 2012 at 11:04

answered Dec 28, 2012 at 10:17

fbynite

2,6611 gold badge22 silver badges26 bronze badges

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

5 Comments

Mattias Buelens Over a year ago

Another argument for placing onload on the body instead of the link: many browsers don't support onload on link (yet). Still, there's room for improvement: you could stop using the onload attribute entirely and attach a load event handler inside the script itself (separating HTML from JavaScript); also you could place all styles in one CSS file and let JavaScript place a class on the body (instead of changing the loaded CSS) to distinguish between styles.

EncountersM Over a year ago

Thank you so much for the quick and accurate response ! I will check out and respond.

EncountersM Over a year ago

Just to be sure, I probably can add <script type="text/javascript"> and </script> around the javascript?

fbynite Over a year ago

This <script> and </script> around the Javascript will do.

EncountersM Over a year ago

I tried the script, but there seems to be an error, nothing happens. Could it be conflicting with other jquery on the page? What is the structure to load several jquery best to have no conflicts?

Ivan Nikolchov · Accepted Answer · 2012-12-28 10:14:12Z

1

You have wrong assignment at the end of the js function.
link.href=href; should be link.href = src;

Cheers

answered Dec 28, 2012 at 10:14

Ivan Nikolchov

1,5941 gold badge28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Load css by date with javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related