将类添加到 div 后 DOM 不更新？答案

【问题标题】：DOM not updating after adding a class to a div?将类添加到 div 后 DOM 不更新？
【发布时间】：2016-04-06 18:34:19
【问题描述】：

我正在尝试编写一个程序，该程序将所有类名收集在 div 中，将它们存储在 array 中，并将它们全部推回 DOM，最后使用名为 blue 的类，这是HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>some title</title>
  <style>
    .blue{
        width: 200px;
        height: 200px;
        background: blue;
    }
  </style>
</head>
<body>

    <div class="someClass otherClass" id="box"></div>
    <button id="btn">click</button>

</body>
</html>

问题是，我知道如何获取div 中的所有类名，甚至如何将blue（点击btn）连同我收集的其他值一起推送到该div 中，但为什么蓝框不是出现了吗？我错过了什么？

var domManipulation = function(){
      var box = document.querySelector('#box');
      var btn = document.querySelector('#btn');
      var class_list = [];

      if(box.classList.length > 0){
        for(var i = 0; i < box.classList.length; i++){
          class_list.push(box.classList[i]);
        }
      }

      btn.addEventListener('click', function(){
          class_list.push("blue");
          box.classList.add(class_list);
          console.log(class_list);
      });

 }();

这是JsBin，我不能使用 jQuery 顺便说一句。

【问题讨论】：

How to add/remove a class in JavaScript?的可能重复
我知道如何添加/推送它，问题是我希望在单击按钮后会出现蓝色框。我可能会改变这个问题，因为我认为它具有误导性。
是的，我相信它可能是 - 改写它的方式，添加“蓝色”类似乎是这里的问题......也表示你如何知道该类是/被正确添加等.
它会验证类名是只是一个属性还是真的存在于head部分的style标签中？
var isBlue = document.getElementsByClassName('blue'); if (isBlue.length > 0) { 或者使用浏览器和开发工具...

标签： javascript html arrays

【解决方案1】：

这就是问题所在：

box.classList.add(class_list);

您不能添加整个类数组，因为它们最终会以逗号分隔。

var domManipulation = function() {
  var box = document.querySelector('#box');
  var btn = document.querySelector('#btn');
  var class_list = [];

  if (box.classList.length > 0) {
    for (var i = 0; i < box.classList.length; i++) {
      class_list.push(box.classList[i]);
    }
  }

  btn.addEventListener('click', function() {
    class_list.push("blue");
    class_list.forEach(function(e){
      box.classList.add(e);
    })
    console.log(class_list);
  });

}();

#box {height: 50px; background: #eee}
#box.blue {background: blue}

<div class="someClass otherClass" id="box"></div>
<button id="btn">click</button>

【讨论】：

是的，我很确定 OP 想要 box.className = class_list.join(' ');
是的，我还举了一个迭代列表并保持'classList.add'的例子
我试过className，但它并没有真正起作用。这个答案做得很好，谢谢队友。
不客气，但className 应该也可以。
是的，这似乎是实际添加类所需要的。