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. User Avatar
    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. User Avatar
    euan
    Permalink to comment#

    how would you create a time verision.

    so at a certain time it changes??

  3. User Avatar
    Michi
    Permalink to comment#

    So where do you write the css files?

  4. User Avatar
    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. User Avatar
    scooter29
    Permalink to comment#

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

  6. User Avatar
    Matuas
    Permalink to comment#

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

  7. User Avatar
    Fabien Equant

    I’m looking for a JS with the same purpose that could asynchronously load the remaining below-the-fold CSS in order to optimise the results in Google Insights, do you have any idea ?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag