web-dev-qa-db-fra.com

Comment getElementByClass au lieu de GetElementById avec JavaScript?

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

Je sais que certains navigateurs prennent désormais en charge getElementByClass, mais comme Internet Explorer ne le permet pas, je ne souhaite pas suivre cette voie.

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

Voici le code HTML. Les DIV elles-mêmes sont manquantes car elles sont générées lors du chargement de page avec XML/XSLT.

Question principale: Comment puis-je obtenir le script Toggle ci-dessous pour obtenir élément par classe au lieu d’obtenir é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>
javascriptclasstogglegetelementbyidgetelementsbyclassname
84
Alan

Les navigateurs modernes prennent en charge document.getElementsByClassName. Vous pouvez voir la liste complète des fournisseurs proposant cette fonctionnalité à l’adresse caniuse . Si vous souhaitez étendre la prise en charge à des navigateurs plus anciens, vous pouvez envisager un moteur de sélecteur similaire à celui de jQuery ou un polyfill.

Réponse plus ancienne

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

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

Google propose un fichier source jQuery hébergé, ce qui vous permet de le référencer et d’être opérationnel en quelques instants. Inclure 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>
72
Sampson

La méthode getElementsByClassName est maintenant supportée nativement 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 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);
  }
}

Usage:

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';
     }
  }
}
86
CMS
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

De manière générale, en utilisant getElementsByClassName, il retourne un tableau de plusieurs classes. Parce que le même nom de classe peut être utilisé dans plusieurs instances dans la même page HTML. Nous utilisons des éléments de tableau id pour cibler la classe dont nous avons besoin. Dans mon cas, il s’agit de la première instance du nom de la classe.

4
Vishwa

Utilisez-le pour accéder à la classe en Javascript. 

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

Ma solution:

Commencez par créer des balises "<style>" avec un identifiant.

<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 fonctionné à merveille pour moi.

2
thylorion

en ajoutant à la réponse de CMS , il s'agit d'une approche plus générique de toggle_visibility que je viens d'utiliser

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';
       }
     }
  }
}
2
cregox

Ajouter des identifiants à la déclaration de classe

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