Question

我正在尝试根据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">

有什么我想念的吗？

Answer 1

你可能做的一切都是正确的（除了一件事，见下文*），文章中的代码使用的是引号“'”，因为它应该使用直引号＆＃39;＆＃39 ; ＆＃34;＆＃34 ;.

<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无法正常工作。

SNIPPET （非功能性，请改为PLUNKER。）

＆＃13;

<!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>

＆＃13;

*我注意到你说：

...我的外部css文件添加在正文的底部......

您应始终将<link>放在<head>内。大多数情况下，JavaScript / jQuery需要在它可以执行任何操作之前加载实际的DOM。因此，在大多数情况下确保您的样式（<link>和<style>）首先位于<head>内部非常重要。

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

用于bootstrap的css样式切换器

1 个答案: