从getElementsByClassName返回值访问classList时出错

Question

所以我有一个div，看起来像:

<div class="wrapper transform-class">
</div>

在我的css中，我有一些css变换。所以我的transform-class有:

-webkit-transform: none !important;

当然，我的包装器上有变换样式

所以一旦页面加载完毕，几秒钟后。我删除了transform-class，然后wrapper类的样式接管，它有一个很好的动画。

我不想使用jQuery(我正在努力学习更多/更好的JavaScript)。我得到

Uncaught TypeError: Cannot read property 'remove' of undefined

作为我的JavaScript错误…我的JS文件看起来像:

window.setTimeout(function(){
  var el = document.getElementsByClassName("wrapper");
      el.classList.remove("transform-class");
}, 2000);

任何想法?

Answer 1

getElementsByClassName返回一个HTMLCollection。因此，通过索引访问特定项，然后使用remove

window.setTimeout(function(){
  var els = document.getElementsByClassName("wrapper");
  for(var i = 0; i < els.length; i++){
      els[i].classList.remove("transform-class");
  }
}, 2000);