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

你可以换一个共同的父里面所有的元素，那么你申请你click事件处理到父，检查发起事件的target。

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

而且，你的风格应该在CSS作为一类被声明，所以你只需要切换特定类（它总是更好地从JavaScript保持关闭的CSS，为mantainability）

这里是一个简单的例子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); 

---

如果您的标记的结构使得impossibile使用共同的包装，你可以在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); 

Answer 2

您需要使用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>