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. 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?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".