Change stylesheet based on month/season in jQuery

I'm trying to find a way to change stylesheets based on what season it is with jquery because at this point it is unknown if I can use php or ruby开发者_如何转开发 at all on this site. Thanks for your responses!

The simplest is to scope your CSS styles and add a class at a high level. I usually do this at the body element. The CSS looks like:

body.summer ul { background-color: green; }
body.fall   ul { background-color: orange; }
body.winter ul { background-color: white; }
body.spring ul { background-color: pink; }

Then, use JS to set the body class:

...</body>
<script ...>
var season = (new Date()).getMonth...;
$('body').addClass(season);
</script>
</html>

As you can see, I placed this immediately after closing the body tag. I think this is the first place you can put it and get it to work, but you'll have to check. The reason to put it here is to prevent the flash of unstyled content-- if you have lots going on on the page, you'll want to execute this Javascript before the on ready callback. That being said, I actually haven't had much problem just putting most of my code in the ready callback.

You can also load different stylesheets easily-- probably at the same place. Just create a style node and insert it into the head as the last node. You'd do this if you have major differences between your styles. Pretty tricky to maintain.

$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");

I would suggest you narrow down the items that you want to change on the page, since the CSS file would already be loaded and jQuery would just be applying the css after the static css is loaded. You could leave these specific style declarations out of the css or keep them as default. For example, if the background image changes, you could set it to white in the default css declaration. This way, on load, it looks normal and you're only using JavaScript to load necessary items.

You could then use the JavaScript month function to get the current month

var month = new Date();
month = month.getMonth();

Then, you could use jQuery to apply those styles to the head with the jQuery ready function. You could have a simple switch of if/else statement to select one of four statements depending on the month number. For example, if you want to change the background

$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>");

Just a quick example, but it would make it more efficient than loading a whole sheet I think.

put all your declarations in one css at the form of

.someStyle{ color:blue;}    
.summer .someStyle{color:yellow;}
.winter .someStyle{color:purple;}
...

all classes under .summer will override the default style for summer
then on the server/client when the page is ready - add this class to the body

the only problem with doing it at the client is that the default style will render first and then switch to the new one (just pick the season most common to your site's users - if it was Israel i would choose summer ;-)