Wie bekomme ich GetElementByClass anstelle von GetElementById mit JavaScript?

91

Ich versuche, die Sichtbarkeit bestimmter DIV-Elemente auf einer Website abhängig von der Klasse jedes DIV umzuschalten. Ich verwende ein einfaches JavaScript-Snippet, um sie umzuschalten. Das Problem ist, dass das Skript nur verwendet getElementById, da getElementByClasses in JavaScript nicht unterstützt wird. Und leider muss ich Klasse und nicht ID verwenden, um die DIVs zu benennen, da die DIV-Namen von meinem XSLT-Stylesheet unter Verwendung bestimmter Kategorienamen dynamisch generiert werden.

Ich weiß, dass bestimmte Browser jetzt unterstützen getElementByClass, aber da Internet Explorer dies nicht tut, möchte ich diesen Weg nicht gehen.

Ich habe Skripte gefunden, die Funktionen verwenden, um Elemente nach Klassen abzurufen (z. B. # 8 auf dieser Seite: http://www.dustindiaz.com/top-ten-javascript/ ), aber ich kann nicht herausfinden, wie sie integriert werden können mit mit meinem Umschalt-Skript.

Hier ist der HTML-Code. Die DIVs selbst fehlen, da sie beim Laden der Seite mit XML / XSLT generiert werden.

Hauptfrage: Wie erhalte ich das folgende Umschalt-Skript, um Element nach Klasse abzurufen, anstatt Element nach ID abzurufen?

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

— Alan
quelle

3

Warum habe ich jQuery nicht die ganze Zeit verwendet? Ich habe @Jonathan Sampsons Vorschlag angenommen, jQuery zu verwenden, und es funktioniert! (Die Antwort von CMS war die, von der ich dachte, dass ich sie suchte, aber nicht zum Laufen bringen konnte.) Ich habe jedem Link eine ID gegeben, und mit jQuery kann ich definieren, welche Klassen angezeigt werden und welche Klassen ausgeblendet werden, wenn Sie auf eine klicken bestimmter Link. GROSSARTIG! Diese Lösung scheint zu gut, um wahr zu sein. jQuery scheint zu gut um wahr zu sein. Was sind die Nachteile der Verwendung von jQuery? Warum sollte ich als Anfänger Javascript anstelle von jQuery verwenden?

— Alan

76

Moderne Browser unterstützen document.getElementsByClassName. Sie können die vollständige Aufschlüsselung der Anbieter sehen, die diese Funktionalität bei caniuse bereitstellen . Wenn Sie die Unterstützung auf ältere Browser ausweiten möchten, sollten Sie eine Selector-Engine wie die in jQuery oder einer Polyfill in Betracht ziehen.

Ältere Antwort

Sie sollten in jQuery einchecken , was Folgendes ermöglicht:

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

Google bietet eine gehostete jQuery-Quelldatei an, damit Sie darauf verweisen und in wenigen Augenblicken einsatzbereit sein können. Fügen Sie Folgendes in Ihre Seite ein:

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

1

Die von Google gehostete jQuery ist zwar gut, aber aufgrund der von den meisten modernen Browsern implementierten Cross-Site-Scripting-Sicherheit nur für die einfachsten Dinge nützlich.

— Paulo Santos

2

Sie können die Quelldatei auch von jQuery.com herunterladen und lokal referenzieren.

— Sampson

21

@Paulo: Cross-Site-Scripting gilt nicht für <script>Tags. Von Google gehostete jQuery wurde speziell für Produktionswebsites (als CDN) entwickelt. Wenn Ihre Site https ist, stellen Sie einfach sicher, dass Sie die https-Version verwenden, um Warnungen vor gemischten Inhalten zu vermeiden.

— Chetan S

3

Tatsächlich ist die <script>Tag-Injection die Grundlage für standortübergreifende JSONP-Anforderungen.

— Chetan S

2

Paulo, stellen Sie fest, dass es nach dem Einfügen von jQuery in das <script> -Tag überhaupt keine standortübergreifenden Einschränkungen gibt?

— Dark Falcon

88

Die getElementsByClassNameMethode wird jetzt nativ von den neuesten Versionen von Firefox, Safari, Chrome, IE und Opera unterstützt. Sie können eine Funktion erstellen, um zu überprüfen, ob eine native Implementierung verfügbar ist. Andernfalls verwenden Sie die Dustin Diaz-Methode:

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

Verwendung:

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

— CMS
quelle

2

Warum verwenden Sie diese innere Funktion anstelle von einfachem Code?

— Tomáš Zato - Wiedereinsetzung Monica

-1 zum Beispiel unter der Annahme, dass alle Elemente auf dem Bildschirm eine Blockanzeige haben. Wenn in toggle_visibility e ein <span> ist, sollte es 'inline' und nicht 'block' sein. Eine viel robustere Lösung besteht darin, eine CSS-Klasse zu definieren: .invisible {display: none! Important} und JavaScript (oder jQuery) zu verwenden, um diese Klasse von Elementen zuzuweisen und die Zuordnung aufzuheben

— John Meyer

6

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

Durch die Verwendung von getElementsByClassName wird ein Array mit mehreren Klassen zurückgegeben. Weil derselbe Klassenname in mehr als einer Instanz innerhalb derselben HTML-Seite verwendet werden kann. Wir verwenden die Array-Element-ID, um auf die Klasse abzuzielen, die wir benötigen. In meinem Fall handelt es sich um die erste Instanz des angegebenen Klassennamens. Also habe ich [0] verwendet.

— Vishwa
quelle

3

Verwenden Sie diese Option, um auf die Klasse in Javascript zuzugreifen.

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

— Manvendra Priyadarshi
quelle

2

Neben der Antwort von CMS ist dies ein allgemeinerer Ansatz, den toggle_visibilityich gerade selbst verwendet habe:

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

— Cregox
quelle

1

Meine Lösung:

Erstellen Sie zuerst "<style>" - Tags mit einer ID.

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

Dann erstelle ich eine Funktion in JavaScript wie folgt:

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

Arbeitete wie ein Zauber für mich.

— Thylorion
quelle

1

Zeilenumbrüche ( <br>) sind innerhalb eines Style-Tags nutzlos / ungültig

— Chris Forrence

-1

Fügen Sie der Klassendeklaration IDs hinzu

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

— Reltpid
quelle