modifier le style de plusieurs éléments via les propriétés de l'objet javascript

Question

(Javascript) J'ai volé ce code très sympa d'un autre post ici.
Il modifie le style.backgroundColor des éléments div avec .onmouseover.

<div id='idEl' class='classEl'>1</div> 
<div id='idEl' class='classEl'>2</div> 
<div id='idEl' class='classEl'>3</div> 
<div id='idEl' class='classEl'>4</div> 
<div id='idEl' class='classEl'>5</div> 
<script> 
    var div = document.getElementsByTagName("div"); 
    for(var i = 0; i < div.length; i++) { 
    div[i].onmouseover = function() { 
    this.style.backgroundColor = "green"; 
    } 
</script> 

Cela fonctionne, mais au lieu de le faire avec TagName (ce serait gâcher tous mes autres dizaines de div), je voudrais le faire fonctionner avec id (si elle est encore possibile) ou avec className.
Et sans utiliser le html attributes, tout devrait être fait par object properties à l'intérieur du <script>.
Ce serait génial si même le puissant addEventListener pouvait fonctionner.

Answer 1

il suffit de changer getElementsByTagName à getElementsByClassName

ici est le Working fiddle et CODE -

<div id='idEl' class='classEl'>1</div> 
<div id='idEl' class='classEl'>2</div> 
<div id='idEl' class='classEl'>3</div> 
<div id='idEl' class='classEl'>4</div> 
<div id='idEl' class='classEl'>5</div> 
<script> 
    var div = document.getElementsByClassName("classEl"); 
    for(var i = 0; i < div.length; i++) { 
    div[i].onmouseover = function() { 
    this.style.backgroundColor = "green"; 
    } 
    } 

</script> 

Note - Il vous manque également une parenthèse fermante } que je mets au-dessus du code et que vous utilisez les mêmes identifiants pour tous les div ce qui est incorrect car les ID doivent être uniques.

Answer 2

Pour obtenir des éléments de classe CSS, vous pouvez utiliser la fonction getElementsByClassName

document.getElementsByClassName("classEl"); 

Notez qu'il est préférable puis en utilisant « id » dans votre cas parce que html dose ne permettent à plusieurs mêmes ids sur le même document .

Pour élément (pas d'éléments), vous pouvez:

document.getElementById("my_unique_id"); 

Vous pouvez voir l'exemple de travail - here