- /* Retourne tout les elements du documents ayant comme class maClass */
- function getElementsByClass(maClass)
- {
- /* Tableau comportant les elements de retour*/
- var tabRetour = new Array();
- /* Tableau temporaire necessaire pour faire la boucle et rechercher
- les elements ayant la classe précisé, il va contenir tout les
- elements du documents */
- var tabTmp = new Array();
- /* Recupere tout les elements du document */
- tabTmp = document.getElementsByTagName("*");
- /* Compteur, sert à incrementer le tableau des valeurs de retour */
- j=0;
- /* Pour chaque element de tabTmp */
- for (i=0; i<tabTmp.length; i++) {
- /* on regarde si la classe de l'i-eme element est celle qu'on recherche */
- if (tabTmp[i].className==maClass)
- {
- /*si oui on ajoute dans notre tableau de retour à l'index j */
- tabRetour[j]=tabTmp[i];
- /* on incremente de 1 j pour pas réecrire l'element suivant par dessus */
- j++;
- }
- /* Element suivant ... */
- }
- /* on retourne notre tableau d'elements ayant la classe spécifié*/
- return tabRetour;
- }
-
-
- Et comme vous me l'avez demandé, voici un exemple d'utilisation :
-
- <head>
- <style type="text/css">
- .pair{height:10px;color:red;}
- .impair{height:15px;color:blue;}
- </style>
- <script language="JavaScript" type="text/javascript">
- function getElementsByClass(maClass) {
- var tabRetour = new Array();
- var tabTmp = new Array();
- tabTmp = document.getElementsByTagName("*");
- j=0;
- for (i=0; i<tabTmp.length; i++) {
- if (tabTmp[i].className==maClass) {
- tabRetour[j]=tabTmp[i];
- j++;
- }
- }
- return tabRetour;
- }
- function changer(){
- for(var i=0;i<getElementsByClass("pair").length;i++){
- getElementsByClass("pair")[i].style.color="green";
- }
- }
- </script>
- </head>
- <body>
- <hr class="pair"></hr>
- <hr class="impair"></hr>
- <hr class="pair"></hr>
- <hr class="impair"></hr>
- <hr class="pair"></hr>
- <hr class="impair"></hr>
- <hr class="pair"></hr>
- <hr class="impair"></hr>
- <hr class="pair"></hr>
- <input type="button" value="click" onclick="changer()" />
- </body>
/* Retourne tout les elements du documents ayant comme class maClass */
function getElementsByClass(maClass)
{
/* Tableau comportant les elements de retour*/
var tabRetour = new Array();
/* Tableau temporaire necessaire pour faire la boucle et rechercher
les elements ayant la classe précisé, il va contenir tout les
elements du documents */
var tabTmp = new Array();
/* Recupere tout les elements du document */
tabTmp = document.getElementsByTagName("*");
/* Compteur, sert à incrementer le tableau des valeurs de retour */
j=0;
/* Pour chaque element de tabTmp */
for (i=0; i<tabTmp.length; i++) {
/* on regarde si la classe de l'i-eme element est celle qu'on recherche */
if (tabTmp[i].className==maClass)
{
/*si oui on ajoute dans notre tableau de retour à l'index j */
tabRetour[j]=tabTmp[i];
/* on incremente de 1 j pour pas réecrire l'element suivant par dessus */
j++;
}
/* Element suivant ... */
}
/* on retourne notre tableau d'elements ayant la classe spécifié*/
return tabRetour;
}
Et comme vous me l'avez demandé, voici un exemple d'utilisation :
<head>
<style type="text/css">
.pair{height:10px;color:red;}
.impair{height:15px;color:blue;}
</style>
<script language="JavaScript" type="text/javascript">
function getElementsByClass(maClass) {
var tabRetour = new Array();
var tabTmp = new Array();
tabTmp = document.getElementsByTagName("*");
j=0;
for (i=0; i<tabTmp.length; i++) {
if (tabTmp[i].className==maClass) {
tabRetour[j]=tabTmp[i];
j++;
}
}
return tabRetour;
}
function changer(){
for(var i=0;i<getElementsByClass("pair").length;i++){
getElementsByClass("pair")[i].style.color="green";
}
}
</script>
</head>
<body>
<hr class="pair"></hr>
<hr class="impair"></hr>
<hr class="pair"></hr>
<hr class="impair"></hr>
<hr class="pair"></hr>
<hr class="impair"></hr>
<hr class="pair"></hr>
<hr class="impair"></hr>
<hr class="pair"></hr>
<input type="button" value="click" onclick="changer()" />
</body>