Question

我正在尝试编写一个程序来收集div中的所有类名，将它们存储在array中并使用名为blue的类将它们全部推回到DOM中最后，这是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点击内）我收集的价值但为什么不出现蓝框？我错过了什么？

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 顺便说一句。

Answer 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>

将一个类添加到div后DOM没有更新？

1 个答案: