Comment getElementByClass au lieu de GetElementById avec JavaScript?

Question 1

J'essaie de basculer la visibilité de certains éléments 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. Le problème est que le script utilise uniquement getElementById, car il getElementByClassn'est pas pris en charge dans JavaScript. Et malheureusement, je dois utiliser class et non id pour nommer les DIV car les noms DIV sont générés dynamiquement par ma feuille de style XSLT en utilisant certains noms de catégories.

Je sais que certains navigateurs prennent désormais en charge getElementByClass, mais depuis Internet Explorer, 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 sur cette page: http://www.dustindiaz.com/top-ten-javascript/ ), mais je n'arrive pas à comprendre comment les intégrer avec avec mon script à bascule.

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

Question principale: Comment 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>

Question 2

Les navigateurs modernes prennent en charge document.getElementsByClassName. Vous pouvez voir la répartition complète des fournisseurs qui fournissent cette fonctionnalité sur caniuse . Si vous cherchez à étendre la prise en charge dans les navigateurs plus anciens, vous pouvez envisager un moteur de sélection comme celui trouvé dans jQuery ou un polyfill.

Réponse plus ancienne

Vous voudrez vous enregistrer dans jQuery , ce qui permettra ce qui suit:

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

Google propose un fichier source jQuery hébergé, vous pouvez donc 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>

Question 3

La getElementsByClassNameméthode est désormais 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';
     }
  }
}

Question 4

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

Acyuellement en utilisant getElementsByClassName, il renvoie un tableau de plusieurs classes. Parce que le même nom de classe peut être utilisé dans plus d'une instance à l'intérieur de la même page HTML. Nous utilisons l'identifiant d'élément de tableau pour cibler la classe dont nous avons besoin, dans mon cas, c'est la première instance du nom de classe donné. J'ai donc utilisé [0]

Question 5

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

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

Question 6

En ajoutant à la réponse de CMS , c'est une approche plus générique que toggle_visibilityje viens d'utiliser moi-même:

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

Question 7

Ma solution:

Créez d'abord 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.

Question 8

Ajouter des ID à la déclaration de classe

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