时间戳

首页 > 解决方案 > 进行切换以向具有特定类的所有元素添加/删除类

javascript - 进行切换以向具有特定类的所有元素添加/删除类

问题描述

我一直在尝试进行切换，因此当单击它时，它会为每个具有“ChangeColors”类但无法这样做的元素添加一个类。它返回

TypeError：无法读取未定义的属性“添加”

CSS

.ChangeColors {
    background-color: #ff801b;
    color:black;
}

.bluecolor {
 background-color: blue;
 color:white;
 }

Javascript

function ChangeColors() {
    var single = document.querySelector('.ChangeColors');
    var all = document.querySelectorAll('.ChangeColors');
    if (single.classList.contains('bluecolor')) {
      all.classList.remove('bluecolor');
      console.log("remove");
    } else {
      all.classList.add('bluecolor');
      console.log("add");
    }
}

标签： javascriptcss

解决方案

您正在尝试使用返回.classList的NodeList类型，document.querySelectorAll而应该在 NodeList 中的每个元素上使用它。

您实际上可以使用classList.toggle来避免像这样进行所有手动切换。

const all = document.querySelectorAll('.ChangeColors');

all.forEach(elem => {
  elem.classList.toggle("bluecolor")
});

推荐阅读