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";

Answer 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>

Answer 2

3

Pourquoi n'ai-je pas toujours utilisé jQuery? J'ai suivi la suggestion de @Jonathan Sampson d'utiliser jQuery, et cela fonctionne! (La réponse de CMS était celle que je pensais rechercher, mais je n'ai pas pu la faire fonctionner) J'ai donné à chaque lien un identifiant, et avec jQuery, je peux définir quelles classes s'affichent et quelles classes sont masqué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 utiliser Javascript au lieu de jQuery?

Alan

Answer 3

77

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>

Sampson
la source

1

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é des scripts intersites implémentée par la plupart des navigateurs modernes.

Paulo Santos

2

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

Sampson

21

@Paulo: les scripts intersites ne s'appliquent pas aux <script>balises. JQuery hébergé par Google est conçu spécifiquement pour les sites Web de production (en tant que CDN). Si votre site est https, assurez-vous simplement d'utiliser la version https pour éviter l'avertissement de contenu mixte.

Chetan S

3

En fait, <script>l'injection de balises est à la base des requêtes JSONP intersites.

Chetan S

2

Paulo, vous vous rendez compte qu'une fois que vous avez inclus jQuery avec la balise <script>, il n'y a pas du tout de restrictions intersites?

Dark Falcon

Answer 4

1

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é des scripts intersites implémentée par la plupart des navigateurs modernes.

Paulo Santos

Answer 5

2

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

Sampson

Answer 6

21

@Paulo: les scripts intersites ne s'appliquent pas aux <script>balises. JQuery hébergé par Google est conçu spécifiquement pour les sites Web de production (en tant que CDN). Si votre site est https, assurez-vous simplement d'utiliser la version https pour éviter l'avertissement de contenu mixte.

Chetan S

Answer 7

3

En fait, <script>l'injection de balises est à la base des requêtes JSONP intersites.

Chetan S

Answer 8

2

Paulo, vous vous rendez compte qu'une fois que vous avez inclus jQuery avec la balise <script>, il n'y a pas du tout de restrictions intersites?

Dark Falcon

Answer 9

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

Answer 10

2

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

Tomáš Zato - Réintégrer Monica

Answer 11

-1 par exemple utilisation en supposant que tous les éléments à 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 attribuer et retirer cette classe des éléments

John Meyer

Answer 12

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]

Answer 13

3

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

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

Manvendra Priyadarshi
la source

Answer 14

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

Answer 15

1

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.

thylorion
la source

1

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

Chris Forrence

Answer 16

1

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

Chris Forrence

Answer 17

-1

Ajouter des ID à la déclaration de classe

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

Reltpid
la source

Comment getElementByClass au lieu de GetElementById avec JavaScript?

Réponses:

Réponse plus ancienne