使用jQuery添加样式表

Question

我已经了解了它，似乎使用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浏览器？移动浏览器？因为我实际上想在移动站点上使用它...

除了用户禁用JavaScript之外，这种样式表加载可能会在一些浏览器中遇到兼容性问题，比如IE和移动浏览器。如果您想在移动站点上使用它，请确保测试并修复任何兼容性问题。

- David Van Staden

Answer 1

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

我建议您使用CSS预处理器（SASS、LESS），只使用一个样式表来设置正常样式，然后在下面使用

.pink

类进行重写。

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

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

- ahren

---

是的，我同意，谢谢。问题在于我有很多不使用类而使用元素定位的样式：例如 #wrapper ul li a{}，我不想向现有的HTML元素添加样式。所以我可以做的是，在开始时加载一个样式表，然后在文档准备好后用另一个样式表替换它...当然还有通过window.onload预加载-在所有内容加载时显示加载gif。 - David Van Staden

SASS/LESS 会负责特定元素的定位。 - ahren

好的，明白了，谢谢...除了IE之外的兼容性如何？使用我的方法可靠且安全吗？ - David Van Staden

Answer 2

这种方法在IE8及以下版本不起作用。

你需要使用另一种方法，比如IE的document.createStyleSheet()方法。

有关更多信息，请参见此讨论：我可以按需加载外部样式表吗？

- Julian