在 2 个 CSS 之间切换答案

【问题标题】：Switching between 2 CSS在 2 个 CSS 之间切换
【发布时间】：2016-03-04 18:34:18
【问题描述】：

我有网站，其中包括 index.html 和 style.css 和 images 文件夹。而且，我想在我的网站（所以 index.html）的主页上创建“切换到另一个主题”按钮，它将在 2 个 css 之间切换。你能告诉我吗：

我是否需要有 2 个类似样式的 CSS - style1.css 和 style2.css？
我需要有 2 个索引页面吗

a) 链接 href="css/style1.css" rel="stylesheet" type="text/css" media="all"/>

b) 链接 href="css/style2.css" rel="stylesheet" type="text/css" media="all"/>
您能告诉我如何做到这一点吗？我是否只需要在索引页面上创建一个在 css 之间切换的按钮。如果是，您能否举出任何示例或建议如何做到这一点？

谢谢

下面是我的 index.html 的头部和身体部分所以在正文部分我有 Switch Css，所以我只需要在我拥有的 css 之间切换的功能。我有原始 style.css 和我的第二个 style2.css

<head>
<title>TecKnowBros</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style2.css" rel="alternate stylesheet" type="text/css" media="all"/>
</head>

<body>
  <div class="wrap">
    <div class="header">
        <div class="headertop_desc">
            <div class="callus">
                 <p><span>Contact Us:</span><span class="number"> 07400000000</p>
            </div>
            <div class="account_desc">
                <ul>
                    <li><a href="#">My Account</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Switch CSS</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="header_top">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt="" /></a>
            </div>
              <div class="cart">
                   <p><span>Cart:</span><div id="drdw" class="wrapper-dropdown-2"> No items -  £0.00
                    <ul class="dropdown">
                            <li>Cart is Empty</li>
                    </ul></div></p>
              </div>

【问题讨论】：

SO 不是“告诉我如何制作……”之类的网站。这是“我正在做某事，这是我尝试过的，这是我的代码，这是我想要的结果，这是我得到的结果/错误。我该如何解决？”一种网站。仅供参考。
我可以在这里添加我使用过的代码，但是如果我使用了 4 种不同类型的 javascripts 并且都不起作用，我认为添加它会让我的帖子变得庞大而愚蠢。 thesitewizard.com/css/switch-alternate-css-styles.shtml 我用过这个例子-dosnt 工作stackoverflow.com/questions/7846980/… 和这个）
查看此解决方案：stackoverflow.com/questions/47772015/…

标签： javascript html css

【解决方案1】：

解决此类问题的常用方法是为每个主题设置两种类型的CSS 类，并在这些类之间切换。考虑以下内容：

<body class="theme1">

或

<body class="theme2">

等等……

在您的CSS 中，您将定义每个主题下的所有元素，因此当您想要更改主题时，只需将类更改为该主题即可。它看起来像这样：

style.css

.theme1 { ... }
.theme1 div{ ... }
(etc)

.theme2 { ... }
.theme2 div{ ... }
(etc)

然后只需使用 javascript 在主题之间切换。如果您向我们提供一些代码，我们将能够帮助您修复任何错误和/解决一些问题，但在此之前，这就是我真正能说的所有帮助。祝你好运！

【讨论】：

我用了很多例子，但不知道为什么它不起作用。我尝试了 4 种不同类型的示例。我的大脑已经无法获取更多信息。
@MichaelPixel 你知道 JavaScript 吗？如果没有，你将不得不学习它来完成你的任务。这个答案几乎可以准确地告诉您您需要做什么。
我解决了。感谢帮助。 with - 和
圣诞节
没有圣诞节

@MichaelPixel 很高兴能帮上忙！