Javascript 获取元素类或数据属性

Question

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

Answer 1

您可以将所有元素包装在一个公共(public)父级中，然后将您的 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);