11550 sujets

JavaScript, DOM et API Web HTML5

Probleme getElementByClassName

Bonjour,

comme l'indique le titre j'ai un petit probême avec getElementByClassName...Je tiens à préciser que je suis débutant en javascript...

J'ai essayé de mettre une mise en forme au survol de la souris...sur un code simple (texte en vert).

[...]
  
 <body>
   <p class="abc"> Essai de texte </p>

  <p class="abc"> Deusiememe essai de code </p>
  </body>
</html>


<script type="text/javascript">

var txt=document.getElementsByClassName('abc');

txt.onmouseover=couleur;
txt.onmouseout=couleur;

function couleur(event) {

   switch(event.type) {
    case "mouseover" :
	this.style.color="green";
	break;
    case "mouseout" :
	this.style.color="";
	break;
    }
}

</script>


Lorsque je met un id à la place de la class du premier <p>, ça marche...et quand je remet les class, ça ne fonctionne plus!!... Smiley decu

Si quelqu'un à une solution...je suis preneur!! Smiley biggrin
Modifié par captain_cab (01 Jun 2011 - 15:33)
Bonjour,

Deux choses à prendre en compte:

1. getElementsByClassName est implémenté à partir de IE9 uniquement (source). Donc dans tous les cas le script ne fonctionnera pas dans IE 7-8 si tu utilises cette méthode. Tu peux éventuellement utiliser querySelectorAll à la place, avec la syntaxe document.querySelectorAll('.abc'), c'est compatible IE8 (mais pas IE7).

2. Dans tous les cas, des méthodes DOM telles que getElementsByTagName, getElementsByClassName ou querySelectorAll vont retourner un objet NodeList, c'est à dire une liste d'éléments de la page. Et une liste d'éléments n'a pas de propriété onmouseover, donc ton txt.onmouseover ne peux pas fonctionner. Il faut boucler sur la liste d'éléments, et pour chacun définir le onmouseover.

Par ailleurs, je suppose que ton exemple est juste un exercice? Car si tu veux modifier l'aspect d'un élément lors du survol, tu peux utiliser CSS uniquement, ce sera tout de même plus simple. Smiley smile
Modifié par fvsch (01 Jun 2011 - 19:12)
Bonsoir,

merci pour vos précisions...Néanmoins l'essai de l'utilisation du getElementsByClassName avait été effectué sous Chrome Smiley confus .

Sinon le code que je vous est communiqué est un code simplifié juste pour vous montrer le problême Smiley cligne

En tout cas, merci!!
captain_cab a écrit :
merci pour vos précisions...Néanmoins l'essai de l'utilisation du getElementsByClassName avait été effectué sous Chrome Smiley confus .

Et ça ne pouvait pas marcher sous Chrome (ou Firefox ou IE9 ou Opera...) à cause du deuxième problème que je soulevais dans mon message.
Sujet clos
Aller à