时间戳

首页 > 解决方案 > 如何使用按钮或开关更改整个 css 文件？

javascript - 如何使用按钮或开关更改整个 css 文件？

问题描述

假设我有 2 个样式表， dark.css 和 light.css 。我想让用户在主页中的这两个主题之间切换，并将其设置为其他页面的默认设置。我的网站还包含许多其他 css 文件，这两个主题几乎相同（否则会出现问题！！）

标签： javascriptjquerycsshtmlcookies

解决方案

我们不应该css为了做这些事情而切换或卸载文件。最好切换一个类html或body元素。

例如 - 首先加载两个css样式文件。然后对于dark.css，将所有样式包装在根类下dark，如下所示 -

.dark .style1{
 ...
}

.dark .style2{
  ...
}

相同的light.css

.light .style1{
 ...
}

.light .style2{
  ...
}

body然后使用下面的 JavaScript切换标签的类-

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


let body = document.body;

let darkBtn = document.getElementById('dark');
let lightBtn = document.getElementById('light');

darkBtn.addEventListener('click', () => {
    body.classList.remove('light');
    body.classList.add('dark');
});

lightBtn.addEventListener('click', () => {
    body.classList.remove('dark');
    body.classList.add('light');
});

现场直播 - https://jsitor.com/3xKxgP8Ow

推荐阅读