如何使用 jQuery 自动切换样式表？答案

【问题标题】：How do I switch stylesheets automatically using jQuery?如何使用 jQuery 自动切换样式表？
【发布时间】：2012-02-08 21:56:32
【问题描述】：

我会再试一次。我的问题被删除了一次，显然是因为 similar question 已经被问到了。当作为对类似问题的回复发布时，它再次被删除，显然是因为不够相似。

我的问题：

这（“类似问题”的解决方案，上面的链接）是否跨浏览器兼容，即这是否适用于所有浏览器？另外，应该在 jQuery 文件中添加什么以使样式表自动切换（白天为浅色，夜间为深色）？

*如果 .js 用于 javascript 文件，那么 .jq 是否用于 jQuery？这是我第一次看到 jQuery 解决方案，因为我通常在 ol' 搜索引擎中输入“javascript”。

希望这个问题得到答复，并且不会被第三次删除。

【问题讨论】：

您之前的帖子已被删除，因为您没有阅读stackoverflow.com/faq 的常见问题解答。答案块仅用于答案，而不是其他问题。这不像大多数留言板。为了回答您的部分问题，jQuery 只是一个用 JavaScript 编写的脚本集合，以使事情变得更容易。都是 JavaScript。不存在或不需要 .jq 文件。要获得其余问题的答案，请独立发布您的问题。同样，您将在常见问题解答中看到，这里简单的问题得到简单的答案。
我发布我的问题作为回复的唯一原因是因为在此之前它已作为自己的线程被删除。我确实阅读了常见问题解答。至于我如何保存它，非常感谢。 :)

标签： jquery safari css

【解决方案1】：

你不需要切换样式表，你只需要切换样式。

<body class='day'>

<body class='night'>

那么你可以拥有：

.day {
    background-color:#ffffff
}

.night {
    background-color:#808080
}

然后您可以通过以下方式进行控制：

$('body').removeClass('day')
$('body').removeClass('night')

围绕它包装一些基于日期时间的逻辑，你就可以开始了。

您也可以像这样对其他页面元素进行子类化以继续主题：

.day h1 { ...  }
.night h1 { ... }

【讨论】：

+1 因为这是他应该做的，即使那不是 OP 要求的。
我明白你在说什么，但我试图避免索引页的文件大小呈指数增长。通过使用内部 CSS 进行定位，并使用外部样式表（背景图像、颜色方案）作为内部 CSS 的补充，我可以避免让其他浏览器崩溃。当在任何给定时间只需要一个时，同时加载所有样式表似乎有点多。我不会进行子分类，就像我会进行子分类一样。（我询问了白天/夜晚的样式，因为我认为任何适用于两个人的答案都应该适用于 366。不能忘记闰年......）
那你一定做错了。请记住，平均样式表小于单个 JPG。
是的，但 366 样式表不是，即使每个单独的样式表本身不到 1kb。
您在备用样式表中所需要的只是样式与主样式表的差异。您无需重新声明所有内容。

【解决方案2】：

jQuery 是一个 Javascript 框架，这意味着它抽象了一些基础的、较低级别的 Javascript 功能，因此它更容易用于更高级的事情，例如 UI 效果、HTTP 请求和 DOM 操作。但事实上，它们都有一个 .js 扩展名。

也就是说，与切换实际样式表相比，我会建议一种替代的、更轻量级的解决方案，从而避免额外的网络请求。 I blogged about this simple method 前一阵子，只需要一行 jQuery。

【讨论】：

【解决方案3】：

Diodius 的回答可能是最好的选择，但由于这不是您要求的，所以我给出了下面的代码。也就是说，我认为您应该强烈考虑 Diodius 的回答。

这（“类似问题”的解决方案，上面的链接）是否跨浏览器兼容，即这是否适用于所有浏览器？

是的。我应该在大多数现代浏览器中工作。

另外，应该在 jQuery 文件中添加什么以使样式表自动切换（白天为浅色，夜间为深色）？

我不确定您的意思是“添加到 jQuery 文件”。您无需向 jQuery 文件添加任何内容，只需引用它，然后 jQuery 就可以在您的 javascript 中使用。

所以要根据一天中的时间改变你的风格，你会有这样的事情：

<link type="text/css" rel="stylesheet" id="timeofdaystyle" href="day.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
  var d = new Date();
  var hour = d.getHours();
  if (hour < 8 || hour > 20) {
     //between 8pm and 8am
     $('#timeofdaystyle').attr('href', 'night.css');
  } else {
     /* this is unnecessary really, because you already have it set to day.css, 
      but I'll add it as an example */
     $('#timeofdaystyle').attr('href', 'day.css');
  }
});
</script>

*如果 .js 用于 javascript 文件，那么 .jq 是否用于 jQuery？这是我第一次看到 jQuery 解决方案，因为我通常在 ol' 搜索引擎中输入“javascript”。

不，.js 文件用于所有 JavaScript。 jQuery 是 JavaScript，因此使用了 .js 扩展名。

希望对你有帮助。

【讨论】：

【解决方案4】：

我不会切换样式表。我会在正文中添加一个类，然后切换该类。如果你有 2 个样式表。一个说移动，另一个说有桌面样式，这只是检测浏览器和更改正文类别的问题。它是跨浏览器兼容的，写起来也不麻烦。

【讨论】：

366，实际上。另外，我正在尝试根据日程安排切换样式。仅供参考，我对脚本完全了解，除了知道诸如 GOTO 之类的东西之外，这些东西都不好。