Javascript 获取元素类或数据属性

Javascript get element class or data attributes

本文关键字：数据属性 元素 获取 Javascript      更新时间：2023-09-26

目前我有一个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>

您可以将所有元素包装在一个公共父级中，然后将click事件处理程序应用于该父级，检查发起该事件target。

这样做，您需要将事件附加到单个元素（而不是每个元素）。

此外，你的风格应该在CSS中声明为一个类，所以你只需要切换那个特定的类（为了可保留性，最好从javascript中远离css）。

这是一个简单的例子 http://codepen.io/anon/pen/jPwXVr

.CSS

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

.JS

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

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

http://codepen.io/anon/pen/aOwPWY?editors=011

.CSS

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

.JS

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);

你需要使用class，这样更好。并循环它！

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

使用addEventListener的示例：

<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>
相关文章：