一键切换多个colors

Question

Hello I have an organised list of class names with a particular color code on each one.您好，我有一个有组织的列表，其中包含 class 个名称，每个名称都有特定的颜色代码。 bgColor1, bgColor2, txtColor1, txtColor2, etc. What I want to do is to switch two shades of white and two shades of black for the background and the text respectively with a single toggle of a button. bgColor1、bgColor2、txtColor1、txtColor2 等。我想要做的是通过一个按钮的单个切换分别为背景和文本切换两种白色和两种黑色。 The idea is that I'll give a single div the classes for the text and the background with their respective names.我的想法是，我将为单个 div 提供文本和背景的类以及它们各自的名称。 And whenever I click the toggle button I want to switch between 3 and 5 and 4 and 6 colors.每当我单击切换按钮时，我都想在 3 和 5 以及 4 和 6 colors 之间切换。

For example if I pick bgColor3 for the background and txtColor5 for the text.例如，如果我为背景选择 bgColor3，为文本选择 txtColor5。 with the toggle it should change to bgColor5 and txtColor3 that way the light background will change to the dark one and the light text will switch to dark.通过切换它应该更改为 bgColor5 和 txtColor3 这样浅色背景将变为深色背景并且浅色文本将切换为深色。

Kind of nailed it but still not working properly and not sure how to fix this...有点钉它但仍然无法正常工作并且不确定如何解决这个......

Here are my css color codes这是我的 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>

Answer 1

I would strongly consider a css redesign so that you can achieve a full dark mode by toggling one class at the root level.我会强烈考虑重新设计 css，这样您就可以通过在根级别切换一个 class 来实现全黑模式。

For example, here I am able to toggle a dark mode simply by adding a dark-mode class to the body.例如，在这里我可以简单地通过向正文添加dark-mode class 来切换暗模式。

 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>

Answer 2

I would give your div an id and use vanilla JS hasClass .我会给你的 div 一个 id 并使用vanilla JS hasClass 。
That way you can now use a conditional where you check which class you have ON in the specific div you are working on and then just change that class to the one you need depending on the result of the conditional.这样你现在可以使用一个条件，你可以在你正在处理的特定 div 中检查你打开了哪个 class，然后根据条件的结果将 class 更改为你需要的那个。
Hope this helps you.希望这对你有帮助。

一键切换多个colors

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-05-02 14:58:25

解决方案2
0 2022-05-02 14:58:12

一键切换多个colors

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-05-02 14:58:25

解决方案2 0 2022-05-02 14:58:12

解决方案1
1 已采纳 2022-05-02 14:58:25

解决方案2
0 2022-05-02 14:58:12