基于jQuery中的月/季度更改样式表 [英] Change stylesheet based on month/season in jQuery

问题描述

我试图找到一种方法来改变基于jquery的季节的样式表，因为在这一点是未知的，如果我可以使用php或ruby在这个网站。感谢您的回应！

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!

推荐答案

最简单的方法是限定CSS样式并在高层添加类。我通常在 body 元素。 CSS看起来像：

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

然后，使用JS设置body类：

Then, use JS to set the body class:

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

如你所见，我在关闭body标记后立即放置它。我认为这是你可以把它，让它工作的第一个地方，但你必须检查。把它放在这里的原因是为了防止闪烁的未定型的内容 - 如果你有很多在页面上，你会想要执行这个Javascript之前准备好回调。也就是说，我实际上没有太多问题，只是把大部分的代码在准备回调。

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

这篇关于基于jQuery中的月/季度更改样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！