JavaScript切换类_Javascript - Fatal编程技术网

JavaScript切换类

javascript

JavaScript切换类,javascript,Javascript,不确定切换是如何工作的。当我点击按钮时，背景如何变回灯光主题，而脚本甚至没有指定变回灯光主题？这是document.body.classList.toggle（'dark-theme'）如果该类存在，则将其删除。如果该类不存在，则添加该类您的按钮将HTML从 'use strict' const switcher = document.querySelector('.btn'); console.log(switcher); switcher.addEventListener('clic

不确定切换是如何工作的。当我点击按钮时，背景如何变回灯光主题，而脚本甚至没有指定变回灯光主题？

这是

document.body.classList.toggle（'dark-theme'）
如果该类存在，则将其删除。如果该类不存在，则添加该类
您的按钮将HTML从
'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";
    }
});

这意味着如果元素具有暗主题
和亮主题
，暗主题
的规则将覆盖由亮主题应用的任何重复样式
.light-theme {
  /* rules */
}
.dark-theme {
  /* rules */
}

主题
黑暗的
“严格使用”
const switcher=document.querySelector（'.btn'）；
控制台日志（交换机）；
switcher.addEventListener（'click'，function（）{
document.body.classList.toggle（'dark-theme'）；
document.body.classList.toggle（'light-theme'）；
让className=document.body.className；
如果（类名==“灯光主题”）{
this.textContent=“黑暗”；
}
否则{
this.textContent=“Light”；
}
});

<body class="light-theme dark-theme">

.light-theme {
  /* rules */
}
.dark-theme {
  /* rules */
}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Theme</title>
   
</head>
<body class="light-theme">


  <div>
    <button type="button" class="btn">Dark</button>
  </div>
      
      
 
  <script type="text/javascript">

'use strict'

const switcher = document.querySelector('.btn');
console.log(switcher);

switcher.addEventListener('click', function() {
    document.body.classList.toggle('dark-theme');
    document.body.classList.toggle('light-theme');

    let className = document.body.className;
    if (className == "light-theme") {
        this.textContent = "Dark";
    }
    else {
       this.textContent = "Light";
    }
});
  </script>
</body>
</html>