Question

我正在尝试根据jquery的季节来找到更改样式表的方法，因为此时我不知道是否可以在此站点上使用php或ruby。谢谢你的回复！

Answer 1

最简单的方法是确定CSS样式的范围并在高级别添加一个类。我通常在 body 元素中执行此操作。 CSS看起来像：

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类：

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

如您所见，我在关闭身体标签后立即放置了这个。我认为这是你可以放置它并使其工作的第一个地方，但你必须检查。把它放在这里的原因是为了防止无格式内容的闪现 - 如果你在页面上有很多事情，你会想要在准备就绪的回调之前执行这个Javascript。话虽如此，实际上我把大部分代码放在准备好的回调中并没有太多问题。

您也可以轻松加载不同的样式表 - 可能在同一个地方。只需创建一个样式节点并将其作为最后一个节点插入头部。如果您的样式之间存在重大差异，则可以执行此操作。非常难以维护。

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

Answer 2

我建议你缩小要在页面上更改的项目，因为CSS文件已经加载，jQuery只是在加载静态css后应用css。您可以将这些特定样式声明保留在css之外，或将它们保留为默认值。例如，如果背景图像发生更改，则可以在默认的css声明中将其设置为白色。这样，在加载时，它看起来很正常，您只使用JavaScript加载必要的项目。

然后，您可以使用JavaScript月份函数获取当前月份

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

然后，您可以使用jQuery将这些样式应用到jQuery ready函数的头部。您可以通过简单的if / else语句切换来根据月份数选择四个语句中的一个。例如，如果要更改背景

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

只是一个简单的例子，但它会比我认为加载整张纸更有效。

Answer 3

以

的形式将所有声明放在一个css中

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

.summer下的所有类都将覆盖夏天的默认样式然后在页面准备就绪时在服务器/客户端上 - 将此类添加到正文

在客户端进行此操作的唯一问题是默认样式将首先呈现，然后切换到新的样式（只选择您网站用户最常见的季节 - 如果是以色列我会选择夏季;-)

在jQuery中根据月/季更改样式表

3 个答案: