'use strict'
const switcher = document.querySelector('.btn');
console.log(switcher);
switcher.addEventListener('click', function() {
document.body.classList.toggle('dark-theme');
let className = document.body.className;
if (className == "light-theme") {
this.textContent = "Dark";
}
else {
this.textContent = "Light";
}
});
不确定开关是如何工作的。当我单击按钮时，背景如何变回浅色主题，而脚本甚至没有指定更改回浅色主题？
最佳答案
这是document.body.classList.toggle('dark-theme');。
如果该类存在，则将其删除。如果该类不存在，则会添加它。
您的按钮更改 HTML
<body class="light-theme">
至
<body class="light-theme dark-theme">
然后再回来。
使用 CSS 规则，如果声明了两个具有相同特性的规则集，并且其中一个规则集声明在另一个规则集之下，则如果两者都应用于某个元素，则下面的规则集将优先。所以
.light-theme {
/* rules */
}
.dark-theme {
/* rules */
}
意味着如果一个元素具有dark-theme和light-theme，dark-theme的规则将覆盖任何重复的样式由light-theme应用。
关于JavaScript 切换类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67646060/