Code Snippet

Home » Code Snippets » JavaScript » Different Stylesheets for Different Days of the Week

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.

Subscribe to The Thread

  1. V1

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

    Reply ↓
  2. euan

    how would you create a time verision.

    so at a certain time it changes??

    Reply ↓
  3. Michi

    So where do you write the css files?

    Reply ↓
  4. Nitin

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~