Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Different Stylesheets for Different Days of the Week

<script type="text/javascript">
<!--
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');
//-->
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="default.css">
</noscript>

Name your css files accordingly: Saturday.css, Friday.css, Sunday.css, etc...

If JavaScript is disabled in the browser, it will revert back to the default.css file.

Comments

  1. V1
    Permalink to comment#

    Don’t use document.write, it will cause the page from displaying a white page for a few seconds before it processes the rest of page. I suggest using a document.createElement instead.

    Because white page of deaths is something your really want to prevent when you are working with dynamic stylesheet generation.

    For example:


    var dSS = {
    names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    number: new Date().getDay(),
    link: document.createElement('link')
    }

    dSS.link.rel = "stylesheet";
    dSS.link.type = "text/css";
    dSS.link.href = dSS.names[ dSS.number ] + ".css";

    document.getElementsByTagName('head')[0].appendChild( dSS.link );

  2. euan
    Permalink to comment#

    how would you create a time verision.

    so at a certain time it changes??

  3. Michi
    Permalink to comment#

    So where do you write the css files?

  4. Nitin
    Permalink to comment#

    above given code is greet.

    can u please create java script code on time basis.

    means,

    12:00am – 4:00 am —– night.css etc,

    please….

  5. scooter29
    Permalink to comment#

    Thanks V1
    How would i make your code work monthly, just change the “getDay” to months and add them?

  6. Matuas
    Permalink to comment#

    Theres an Option to use according to holidays or special days like easter or new year?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```