我有这个简单的网站，我需要让它从轻主题到黑暗的主题变化，轻主题工作正常，但黑暗的主题只改变其按钮正确，因为当我点击按钮改变“body”元素应该改变其类从“light-theme”到“dark-theme”，而不是它改变为“light-theme dark-theme”这里的HTML '
<body class="light-theme">
<h1>Task List</h1>
<p id="msg">Current tasks:</p>
<ul>
<li class="list">Add visual styles</li>
<li class="list">add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site</noscript>Heres CSS
:root {
--green: #00FF00;
--white: #FFFFFF;
--black: #000000;
}
.btn {
position: absolute;
top: 20px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}
.btn:focus {
outline-style: none;
}
body {
background: var(--bg);
}
ul {
font-family: helvetica;
}
li {
list-style: circle;
}
.list {
list-style: square;
}
.light-theme {
--bg: var(--green);
--fontColor: var(--black);
--btnBg: var(--black);
--btnFontColor: var(--white);
}
.dark-theme{
--bg: var(--black);
--fontColor: var(--green);
--btnBg: var(--white);
--btnFontColor: var(--black);
}and heres JavaScript
'use strict';
const switcher = document.querySelector('.btn');
switcher.addEventListener('click', function () {
document.body.classList.toggle('dark-theme')
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
} else {
this.textContent = "Light";
}
console.log('current class name: ' + className);
});'
我试图改变css中的一些东西，但后来发现问题可能出在javascript中，但我的代码和我课程中的代码完全一样。
1条答案
按热度按时间dwbf0jvd1#
当我点击按钮改变“body”元素时，它的类应该从“light-theme”变为“dark-theme”，而不是“light-theme dark-theme”
确实如此-您的JS代码只是切换类
"dark-theme"，而对"light-theme"类没有任何操作。因此，一个简单的修复方法是切换 * 两个 * 类：
但是你可以简化你的代码，因为你真的不需要2个类。如果light theme是默认的，只要删除
light-theme类和它的所有CSS规则，并将它们应用到body。.dark-theme规则将在类被设置时覆盖这些规则，否则就不会。