Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

Question

Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

Demandé el 19 de Décembre, 2009: Quand la question a-t-elle été
229170 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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>

Demandé el 19 de Décembre, 2009 par Alan

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 ?

Commenté el 19 de Décembre, 2009 par Alan

Answer 1

5 Réponses

Answer 2

89voto

CMS Points 315406

El getElementsByClassName est maintenant supportée en natif par les versions les plus récentes de Firefox, Safari, Chrome, IE et Opera, vous pouvez créer une fonction pour vérifier si une implémentation native est disponible, sinon utilisez la méthode de Dustin Diaz :

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Utilisation :

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

Répondu el 19 de Décembre, 2009 par CMS (315406 Points )

2 votes

Pourquoi utilisez-vous cette fonction interne au lieu d'un simple code ?

Commenté el 25 de Décembre, 2013 par Tomáš Zato

0 votes

-1 par exemple l'utilisation en supposant que tous les éléments de l'écran ont un affichage en bloc. Dans toggle_visibility, si e est un <span>, alors il devrait être 'inline' et non 'block'. Une solution beaucoup plus robuste consiste à définir une classe CSS : .invisible { display : none !important } et à utiliser JavaScript (ou jQuery) pour assigner et désassigner cette classe aux éléments.

Commenté el 24 de Juillet, 2015 par John Meyer

Answer 3

82voto

Jonathan Sampson Points 121800

Les navigateurs modernes prennent en charge document.getElementsByClassName . Vous pouvez consulter la liste complète des fournisseurs qui proposent cette fonctionnalité à l'adresse suivante caniuse . Si vous souhaitez étendre la prise en charge aux navigateurs plus anciens, vous pouvez envisager d'utiliser un moteur de sélection comme celui de jQuery ou un polyfill.

Réponse plus ancienne

Vous voudrez vérifier dans jQuery qui permettra ce qui suit :

$(".classname").hide(); // hides everything with class 'classname'

Google propose un fichier source jQuery hébergé, de sorte que vous pouvez le référencer et être opérationnel en quelques instants. Incluez les éléments suivants dans votre page :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Répondu el 19 de Décembre, 2009 par Jonathan Sampson (121800 Points )

1 votes

Bien que bon, le jQuery hébergé par Google n'est utile que pour les choses les plus simples, en raison de la sécurité contre les scripts intersites mise en place par la plupart des navigateurs modernes.

Commenté el 19 de Décembre, 2009 par Paulo Santos

2 votes

Vous pouvez également télécharger le fichier source depuis jQuery.com et le référencer localement.

Commenté el 19 de Décembre, 2009 par Jonathan Sampson

22 votes

@Paulo : Cross-site scripting n'est pas applicable pour <script> tags. Google hosted jQuery est conçu spécifiquement pour les sites de production (en tant que CDN). Si votre site est https, veillez simplement à utiliser la version https pour éviter l'avertissement de contenu mixte.

Commenté el 19 de Décembre, 2009 par Chetan Sastry

Afficher 2 autres commentaires

Answer 4

7voto

Vishwa Points 572

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

En général, en utilisant getElementsByClassName, on obtient un tableau de plusieurs classes. En effet, le même nom de classe peut être utilisé dans plus d'une instance dans la même page HTML. Nous utilisons l'id de l'élément du tableau pour cibler la classe dont nous avons besoin, dans mon cas, il s'agit de la première instance du nom de la classe donnée.

Répondu el 23 de Novembre, 2017 par Vishwa (572 Points )

Answer 5

4voto

Manvendra Priyadarshi Points 197

Utilisez-le pour accéder aux classes en Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Répondu el 28 de Juin, 2016 par Manvendra Priyadarshi (197 Points )

Answer 6

2voto

Cawas Points 3303

En ajoutant Réponse de la CMS il s'agit d'une approche plus générique de toggle_visibility Je viens de me servir :

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Répondu el 16 de Septembre, 2010 par Cawas (3303 Points )

Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

Réponses

Réponse plus ancienne

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

Réponses

Réponse plus ancienne

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: