用于引导的 css 样式切换器答案

【问题标题】：css style switcher for bootstrap用于引导的 css 样式切换器
【发布时间】：2016-12-18 17:30:21
【问题描述】：

我正在尝试根据https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to 实现样式切换器。但是，一旦我在 css 链接中添加了 title=""，css 文件就不会加载到页面上，并且样式会退回到默认引导程序。我的外部 css 文件添加在正文的底部。顺序是：

<link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 0px;
        }
    </style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">

有什么我想念的吗？

【问题讨论】：

您遇到什么错误？你能提供一些jsfiddle吗？
不确定我的第一个小提琴是否正确，因此您可以从中获取相关信息...请参阅此处：jsfiddle.net/pigsound/em37bdjj/11
@pigsound 看到我的回答，我非常熟悉这个特定的代码。

标签： javascript css twitter-bootstrap

【解决方案1】：

您可能做对了所有事情（除了一件事，见下文*），文章中的代码在应该使用直引号 '' "" 时使用了大引号“”“”。

<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>

因此，如果您复制并粘贴此部分，将无法正确解析。这是使用直引号的正确方法：

 <a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
 <a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>

查看此PLUNKER 而不是代码段。由于涉及多个样式表，该代码段将无法工作。

SNIPPET（无效，请查看 PLUNKER。）

<!doctype html>
<html>
  <head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
        <style>
        body {
            padding-top: 50px;
            padding-bottom: 0px;
        }
    </style>
    </head>
  <body>
    <section>
      <p>TEST</p>
      </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <script src='styleSwitcher.js'></script>
    </body>
  </html>

*我注意到你说：

...我的外部css文件被添加到body底部...

您应该始终将<link>s 放在<head> 中。大多数情况下，JavaScript/jQuery 需要加载实际的 DOM，然后才能执行任何操作。因此，在大多数情况下，确保您的样式（<link> 和 <style>）排在首位并进入 <head> 是很重要的。

对于<script>，最好将它们放在<body> 的底部，就在结束标记</body> 之前。请参阅片段和 PLUNKER，例如 <link>、<style> 和 <script> 布局。

【讨论】：

所以你的意思是我的html代码中涉及的样式表太多了？当我重新加载页面时，1 秒内正确的 css 可见，但随后它似乎关闭并显示默认 css。我试图将所有 css 放在头上，但错误仍然出现 - 只要 css-link 获得标题 =“”，它就不会被识别。当 css 包含在头部而不是身体底部时，它直接显示默认引导 css 而不会显示自定义 css 甚至不到 1 秒。我查看了您添加的 plunker。它似乎适用于 chrome，但不适用于 Firefox。
我在 PC 上使用 Chrome、Firefox 和 Edge 进行了测试。在 Mac 上，我在 Chrome、Firefox 和 Safari 上进行了测试。完全没有问题。您使用的是 WordPress、Drupal、Joomla 还是其他一些 CMS？将所有样式放在头部尤其是链接中是常见的做法，所以不，我并不是说您有太多样式表。 stackoverflow.com/a/18449119/2813224
对不起，我不精确：我在 pc 上用 Firefox 和 chrome 打开了你的 plunker，发现在 Firefox 中它不起作用。谢谢你的帮助和建议，我会继续努力的。
你知道如何使用萤火虫吗？ F12 然后单击控制台选项卡并查看错误？您的环境中有一些东西阻碍了简单的功能，或者是一个简单的错字。 styleSwitcher.js 是一个已经存在多年的跨浏览器脚本，它非常可靠和基本（当你看到每个功能时基本。）