在 javascript 中添加和删除类的按钮答案

【问题标题】：button to add and remove class in javascript在 javascript 中添加和删除类的按钮
【发布时间】：2021-07-14 07:40:47
【问题描述】：

我一直在尝试创建两个按钮，您可以在其中切换网站的暗模式。它第一次工作，但是当我第二次点击它时它没有改变，有什么办法可以实现它

document.querySelector('.btn').addEventListener('click', function(){
  
  document.querySelector('.day').classList.remove('day');
  document.querySelector('.day').classList.add('dark');

});

document.querySelector('.btn1').addEventListener('click', function(){
  
  document.querySelector('.dark').classList.add('day');
  document.querySelector('.dark').classList.remove('dark');

});

.dark {
  width: 100%;
  padding: 25px;
  background-color: black;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
  position:relative; 
  text-align:center;
}

.btn{
padding:15px 10px;
background:black;
color:white;
text-align:center;
position:relative;
font-weight:bold;
width: 100%;

}
.btn1{
padding:15px 10px;
background:red;
color:white;
text-align:center;
position:relative;
font-weight:bold;
width: 100%;

}
 .day{
width: 100%;
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 45px;
  box-sizing: border-box;
  position:relative; 
  text-align:center;
}
.normal{
font-size: 45px;
  box-sizing: border-box;
  position:relative; 
  text-align:center;

}

<button class="btn" >DarkMode</button>
<button class="btn1" >Normal Mode</button>

<div class="day dark normal">
This is a DIV element.
</div>

仅适用于 javascript。

任何帮助将不胜感激。

【问题讨论】：

如果你只想要javascript为什么要添加jquery标签？

标签： javascript class dom addeventlistener

【解决方案1】：

你必须这样做：

document.querySelector('.btn').addEventListener('click', function() {
  var day = document.querySelector('.day');
  day.classList.remove('day');
  day.classList.add('dark')

});

例如，第一次运行document.querySelector('.day') 时，您删除了上课日。然后你再次运行document.querySelector('.day')，但这次没有day 类，所以它找不到元素。

演示

document.querySelector('.btn').addEventListener('click', function() {
  var day = document.querySelector('.day');
  day.classList.remove('day');
  day.classList.add('dark')

});

document.querySelector('.btn1').addEventListener('click', function() {

  var dark = document.querySelector('.dark');
  dark.classList.remove('dark');
  dark.classList.add('day')

});

.dark {
  width: 100%;
  padding: 25px;
  background-color: black;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.btn {
  padding: 15px 10px;
  background: black;
  color: white;
  text-align: center;
  position: relative;
  font-weight: bold;
  width: 100%;
}

.btn1 {
  padding: 15px 10px;
  background: red;
  color: white;
  text-align: center;
  position: relative;
  font-weight: bold;
  width: 100%;
}

.day {
  width: 100%;
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 45px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.normal {
  font-size: 45px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

<button class="btn">DarkMode</button>
<button class="btn1">Normal Mode</button>

<div class="day dark normal">
  This is a DIV element.
</div>

【讨论】：

@Vijay 没问题