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浏览器？移动浏览器？因为我实际上想在移动网站上使用它...

Answer 1

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

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

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

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

Answer 2

此方法在IE8及以下版本中无效。

你必须使用另一种方法，比如IEss document.createStyleSheet（）方法。

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

使用jQuery添加样式表

2 个答案: