Question

I use the following code to get the current hour of the client and to know if it’s AM or PM:

<script type="text/javascript">
//get client time
var d = new Date();
if(d.getHours() >= 06 && d.getHours() <= 18){
    var dayStatus = "day";
    document.write("day");
}else{
    var dayStatus = "night";
    document.write("night");
}
</script>

I figured out how to find out if it’s AM or PM for the client but I want to use different css stylesheet whether it’s day or night. How could I do this?

This is what I got in my html HEAD so far which obviously does not work, just need to know how to make it work:

<script type="text/javascript">
if(dayStatus = "day"){
    <link href="includes/style.css" rel="stylesheet" type="text/css" />
}else{
    <link href="includes/style2.css" rel="stylesheet" type="text/css" />
}
</script>

Answer 1

You cannot change a (server-side) session using JavaScript. You really need to do this server-side. If you need the clients time, you will need to post it to the server using AJAX. There are, however, two easier ways of doing it:

Client-sided:

if (isDay) {
    document.write('<link type="text/css" rel="stylesheet" href="url/to/day.css" />');
} else {
    document.write('<link type="text/css" rel="stylesheet" href="url/to/night.css" />');
}

Server-sided:

if ($isDay) {
    echo '<link type="text/css" rel="stylesheet" href="url/to/day.css" />';
} else {
    echo '<link type="text/css" rel="stylesheet" href="url/to/night.css" />';
}