在 bootstrap.css 主题之间动态切换答案

【问题标题】：Dynamically switching between bootstrap.css theme's在 bootstrap.css 主题之间动态切换
【发布时间】：2022-04-05 21:53:02
【问题描述】：

我正在尝试在我在 MVC 应用程序上创建的深色和浅色主题之间切换。

我的 _Layout.cshtml 页面加载了我在下面创建的默认主题

<link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original.css">

我已经创建了下面的按钮来在下面的主题之间切换

<button id="light">Light</button><br />
<button id="dark">Dark</button>

我的另外两个引导主题位于 lib > bootstrap> dist > css >

我的 botstrap.js 文件中有以下 js

$('#dark').click(function () {
    $('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Dark.css');
});
$('#light').click(function () {
    $('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Light.css');
});

不确定我是否犯了一些明显的错误，但感谢您对此提供任何帮助。

【问题讨论】：

您目前遇到的问题是什么？
请注意，默认情况下，按钮会提交它们所在的任何表单。
当前按下按钮时页面没有变化。我想知道我查询的 href 或 js 本身是否有问题
难道你对链接元素的 dom 查询没有返回任何元素吗？看起来您正在寻找以~/ 开头的href。在您的剃须刀页面中，它被转换为内容根目录的路径，但在查询时不会
你试过这个吗？ Replacing css file

标签： javascript html css asp.net-mvc

【解决方案1】：

在 VanillaJS 中，还要检查链接标签上的 href 是否正确解析为 CSS 文件。

const darkBtn = document.querySelector('#dark');
const lightBtn = document.querySelector('#light');
const linkTag = document.querySelector('#theme');

darkBtn.addEventListener('click', () => {
  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Dark.css')
});

lightBtn.addEventListener('click', () => {
  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Light.css')
});

【讨论】：

您好，感谢您的回答。不幸的是，这对我不起作用。在我的 _Layout 页面中，我有和我放在 bootstrap.js 文件中的 js。不确定为什么它不起作用。如果您能看到任何其他问题，我们将不胜感激。
尝试将此代码添加到脚本标签的页脚中。当您单击时检查脚本会发生什么变化？
嗨 Lucjan，当使用您在页脚部分提供的 sn-p 运行此程序时。这似乎删除了与应用程序关联的任何类型的引导程序，但是至少现在单击按钮时发生了一些变化。
您必须始终附加引导 CSS 文件，如果您想要主题，只需使用选择器编写 CSS 文件以覆盖原始 CSS 值。您还可以随时附加带有深色和浅色主题的文件，然后根据您的选择器向正文添加一个类。

【解决方案2】：

您可能需要以下代码：

$('#dark').click(function () {
    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Dark.css');
});
$('#light').click(function () {
    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Light.css');
});

您的代码正在寻找一个链接元素，其中 href 以 ~/ 开头。在您的剃刀页面中，href 以此字符串开头。但是 ASP.NET 将其替换为 content-root 的路径，因此对于浏览器而言，href 不会以该字符串开头。

【讨论】：

您好，感谢您的回答。我尝试了您的 sn-p 并且它是相同的，当我按下按钮时没有发生任何事情我没有在我的 MVC 应用程序上使用剃须刀页面。我正在使用cshtml页面。对于我的 _Layout 页面，我没有使用任何服务器端代码，因此不需要剃刀。从我的代码中，您可以看到我放在 bootstrap.js 文件中的 js 的任何问题。或者您能看到任何其他可能导致此问题的问题吗？
我创建了一个基本示例github.com/PieterjanDeClippel/DynamicTheme。只需打开 cmd -> git clone github.com/PieterjanDeClippel/DynamicTheme 并打开项目
请注意，我没有修改原始 bootstrap.css 文件。我创建了一个新的 css 文件，在其中重载了颜色
您好，感谢您的回复。您是否运行过您创建的 mvc 应用程序？似乎应用程序不会改变其中的主题。我一直有同样的问题
在我的电脑上运行良好。如果您打开开发者工具 (F12)，您会在控制台中看到异常（粉红色）吗？

【解决方案3】：

我下载了 Pieterjan 解决方案，在我这样添加 event.preventDefault() 后它开始工作：

$(document).ready(function () {
            $('#dark').click(function () {
                event.preventDefault();
                $('#dynamicCss').attr('href', '/css/site-dark.css');
            });
            $('#light').click(function () {
                event.preventDefault();
                $('#dynamicCss').attr('href', '/css/site-light.css');
            });
        });

但网站刷新页面后又显示浅色主题。

【讨论】：