使用 jQuery 添加样式表答案

【问题标题】：Adding Stylesheet with jQuery使用 jQuery 添加样式表
【发布时间】：2013-03-25 21:24:19
【问题描述】：

我已经阅读了它，似乎使用 jQuery 添加样式表的最佳方法如下：

 $('head').append('<link rel="stylesheet" type="text/css" href="../css/mystyle.css">');

现在我想做的是使用这种方法在不同主题之间切换：

<script type="text/javascript">
      $(document).ready(function () {
          if($('body').hasClass('pink'))
          {
              $('head').append('<link rel="stylesheet" type="text/css" href="../css/mystylePink.css">');
          }
          else
          {
              $('head').append('<link rel="stylesheet" type="text/css" href="../css/mystyle.css">');
          }
      });
</script>

我的问题：除了没有启用 javascript 的表单用户，加载这样的样式表时存在哪些复杂性/问题？ IE？移动浏览器？因为我实际上想在移动网站上使用它...

【问题讨论】：

标签： jquery

【解决方案1】：

这里的主要问题是样式表加载时无样式内容的闪烁，而不是 IE 或移动浏览器。

我建议您使用 CSS 预处理器（SASS、LESS），只使用一个带有您的正常样式的样式表，然后用下面的 .pink 类覆盖。

.myClass{
  color: white;
  background: black;
}

.pink .myClass{
  color: pink;
  background: grey;
}

【讨论】：

是的，我同意，谢谢。问题是我有许多不使用类并使用元素定位的样式：例如#wrapper ul li a{}，我不想将样式添加到现有的 html 元素中。所以我能做的就是加载一个样式表开始，然后在文档准备好后用另一个样式表替换它....然后当然有 window.onload 预加载 - 在所有内容加载时显示加载 gif
SASS/LESS 将负责特定的元素定位。
好吧，我明白了，谢谢...除了 IE 之外的兼容性怎么样？使用我的方法是否可靠且安全？

【解决方案2】：

此方法不适用于 IE8 及以下版本。

您必须使用其他方法，例如 IEss document.createStyleSheet() 方法。

有关更多信息，请参阅此讨论：Can I load external stylesheets on request?

【讨论】：