Javascript获取元素类或数据属性

目前，我有一个javascript函数，它查找id并更改一些CSS。但是，我希望此函数在多个div上运行。因此，我需要我的函数来查找类或数据属性。请你能帮帮我吗

<script>
  var div = document.getElementById('hover')
  div.onclick = function () {
    this.style.width = '800px'
    this.style.transition = 'all 1s'
    this.style.backgroundColor = 'red'
  }
</script>

var div=document.getElementById（'hover'）
div.onclick=函数（）{
this.style.width='800px'
this.style.transition='all 1s'
this.style.backgroundColor='red'
}

您需要使用一个

类，这样更好。然后循环它

<script>
  var divs = document.getElementsByClassName('hover');
  for (var i = 0; i < divs.length; i++)
    divs[i].onclick = function () {
      this.style.width = '800px'
      this.style.transition = 'all 1s'
      this.style.backgroundColor = 'red'
    }
</script>

您可以将所有元素封装在一个公共父级中，然后将
单击
事件处理程序应用于该父级，检查引发事件的
目标

为此，您需要将事件仅附加到单个元素（而不是每个元素）

此外，您的样式应该在CSS中声明为类，因此您只需要切换特定的类（为了可维护性，最好将CSS与javascript分开）

下面是一个简单的例子

CSS

JS


如果标记的结构使得无法使用公共包装器，则可以将事件附加到
body
元素上，如下所示


CSS

JS

在以下情况下使用
addEventListener
：looping@vihan1086让我包括在内<代码>：D

最好使用事件delegation@FabrizioCalderan为什么？@PraveenKumar还有一种方法可以在点击时影响另一个类CSS？太酷了，但我需要在页面上有很多这样的内容，这样就可以用一个田园诗包起来。你可以把活动也贴在身体上——我会准备另一个example@FabrizioCalderan我真的很困惑如何在我的项目中实现它，这是我当前的代码（），你能帮我吗，

<script>
  var divs = document.getElementsByClassName('hover');
  for (var i = 0; i < divs.length; i++)
    divs[i].addEventListener("click", function () {
      this.style.width = '800px'
      this.style.transition = 'all 1s'
      this.style.backgroundColor = 'red'
    }, false);
</script>

.open {
  width: 800px;
  -webkit-transition  : all 1s;
  -moz-transition  : all 1s;
  transition  : all 1s;
  background: red;
}

 document.getElementById('wrap').addEventListener('click', function(ev) {
  var target = ev.target
  if (target.nodeName === 'DIV') {
      target.className = 'open';        
  } 
}, false);

.element {
  width: 800px; 
  -webkit-transition  : all 1s;
  -moz-transition  : all 1s;
  transition  : all 1s;
}

.element.open {
  background: red;
}

document.body.addEventListener('click', function(ev) {
   var t = ev.target;

   /* I used classList for the sake of brevity, check caniuse.com
      for its support across browser */

   if (t.classList.contains('element')) {
       t.classList.toggle('open');        
   } 
}, false);