104 votes

Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

J'essaie de faire basculer la visibilité de certains éléments DIV sur un site Web en fonction de la classe de chaque DIV. J'utilise un extrait JavaScript de base pour les faire basculer. Le problème est que le script utilise seulement getElementById comme getElementByClass n'est pas pris en charge par JavaScript. Et malheureusement, je dois utiliser class et non id pour nommer les DIVs car les noms des DIVs sont générés dynamiquement par ma feuille de style XSLT en utilisant certains noms de catégories.

Je sais que certains navigateurs supportent maintenant getElementByClass mais comme Internet Explorer ne le fait pas, je ne veux pas emprunter cette voie.

J'ai trouvé des scripts utilisant des fonctions pour obtenir des éléments par classe (comme le #8 de cette page : http://www.dustindiaz.com/top-ten-javascript/ ), mais je n'arrive pas à trouver comment les intégrer avec mon toggle script.

Voici le code HTML. Les DIVs eux-mêmes sont absents car ils sont générés au chargement de la page avec XML/XSLT.

Question principale : Comment faire pour que le Toggle script ci-dessous obtienne l'élément par classe au lieu d'obtenir l'élément par ID ?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

3 votes

Pourquoi n'ai-je pas utilisé jQuery depuis le début ? J'ai suivi la suggestion de @Jonathan Sampson d'utiliser jQuery, et ça marche ! (La réponse de CMS était celle que je pensais chercher, mais je n'arrivais pas à la faire fonctionner) J'ai donné un id à chaque lien, et avec jQuery je peux définir quelles classes s'affichent et quelles classes sont cachées lorsque vous cliquez sur un lien particulier. GÉNIAL ! Cette solution semble trop belle pour être vraie. jQuery semble trop beau pour être vrai. Quels sont les inconvénients de l'utilisation de jQuery ? En tant que novice, pourquoi utiliserais-je Javascript au lieu de jQuery ?

1voto

thylorion Points 11

Ma solution :

Créez d'abord des balises "<style>" avec un ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Ensuite, je crée une fonction en JavaScript comme ceci :

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Ça a marché comme un charme pour moi.

1 votes

Sauts de ligne ( <br> ) sont inutiles/invalides dans une balise de style

-1voto

Reltpid Points 61

Ajouter les ID à la déclaration de la classe

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X