你好，我有一个有组织的类名列表，每个类名上都有一个特定的颜色代码。bgColor1, bgColor2, txtColor1, txtColor2等。我想做的是用一个按钮切换背景和文本的两种白色和两种黑色。这个想法是，我将为文本和背景的类提供一个单独的div，并使用它们各自的名称。每当我点击切换按钮时，我想在3和5之间切换，在4和6之间切换。
例如，如果我选择bgColor3为背景和txtColor5为文本。通过切换，它应该变为bgColor5和txtColor3，这样浅色背景将变为深色，浅色文本将变为深色。
有点钉住了，但仍然不能正常工作，不知道如何解决这个问题…
这是我的css颜色代码function toggleDarkMode() {
let bgColor3 = document.getElementsByClassName('bgColor3');
for(let index = 0 ; index < bgColor3.length ; ++index)
bgColor3[index].classList.toggle('bgColor5');
let txtColor5 = document.getElementsByClassName('txtColor5');
for(let index = 0 ; index < txtColor5.length ; ++index)
txtColor5[index].classList.toggle('txtColor3');
}/* MAIN LIGHT */
.txtColor3 {
color: #FFF7F1;
}
.bgColor3 {
background-color: #FFF7F1;
}
/* SECONDARY LIGHT */
.txtColor4 {
color: #FBF3EC;
}
.bgColor4 {
background-color: #FBF3EC;
}
/* MAIN DARK */
.txtColor5 {
color: #022326;
}
.bgColor5 {
background-color: #022326;
}
/* SECONDARY DARK */
.txtColor6 {
color: #01181C;
}
.bgColor6 {
background-color: #01181C;
}<button onclick="toggleDarkMode()">Toggle dark mode</button>
<div class="darkmode bgColor3 txtColor5 bs1 fcv">test</div>我强烈考虑重新设计css，这样你就可以通过在根级切换一个类来实现完全的暗模式。
例如，这里我可以通过在主体中添加dark-mode类来切换暗模式。
document.querySelector('button').addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});.card {
background: yellow;
color: blue;
}
h1 {
padding: 0;
margin: 0;
}
.dark-mode .card {
background: #555;
color: white;
}
.dark-mode {
background: #111;
}
.dark-mode h1 {
color: yellow;
background: #777;
}<body>
<h1>My Page</h1>
<p class='card'>Test 123 <button>toggle dark mode</button></p>
</body>我会给你的div和id，并使用香草JS hasClass。
这样，你现在可以使用一个条件，你检查在你正在处理的特定div中有哪个类，然后根据条件的结果将那个类更改为你需要的那个。
希望这对你有帮助。