Javascript 如何使用div&；在暗/亮模式之间切换；JS？

我想在我的页面中切换所有“主题”标签，从亮到暗，从暗到亮

<div theme="light" id="switch-theme" class="switch-btn">

这是我的按钮，点击后应将页面上的每个“主题”标签切换到所需的颜色模式

我试过：

    <div theme="light" id="switch-theme" class="switch-btn" 

onclick="this.setAttribute('theme', this.getAttribute('theme') === 'dark' ? 'light' : 'dark')">

但这只是将按钮切换为黑色，而不是页面上的每个主题属性

---

有人能帮我吗？

要做到这一点，您必须将click handler函数添加到所有元素中。此外，我建议您不要使用内联单击处理程序函数，而是可以通过以下方式附加事件：

//使用类开关btn获取所有元素
var btnList=document.querySelectorAll（'.switch btn'）；
//循环通过它们
btnList.forEach（函数（btn）{
//将事件附加到当前元素
btn.addEventListener（'click'，function（）{
//清理控制台
console.clear（）；
//设置属性
this.setAttribute（'theme'，this.getAttribute（'theme'）='dark'？'light'：'dark'）；
//试验
console.log（`index${Array.prototype.slice.call（btnList.indexOf（btn）}处的元素，主题${this.getAttribute（'theme'）}`）
});
});
div1
Div 2
这里还有另一种基于代码的方法将主题属性值一次性切换到所有元素：
let btn=document.querySelector（“切换主题”）；
btn.addEventListener（“单击”，函数（）{
让theme=document.queryselectoral（“[theme]”）；
for（设i=0；i
。交换机btn{
外观：按钮；
显示：内联块；
}
[主题=“黑暗”]{
背景：黑色；
颜色：白色；
}
切换主题
主题拳击
主题拳击
主题拳击
Theme boxe
嘿，当我这样做时，我得到了未捕获的TypeError：无法读取null的属性'addEventListener'。知道为什么吗？@E-D不应该，这里的代码片段也不应该。你能展示一下你试过但没用的东西吗?？