Wie wähle ich HTML-Elemente nach Klassennamen in JavaScript aus?

Wie erhalte ich ElementByClass mit JavaScript?

Frage:

Sie möchten die Sichtbarkeit umschalten von DIV-Elementen basierend auf ihrer Klasse mithilfe eines JavaScript-Snippets. Das aktuelle Skript basiert jedoch auf getElementById, was nicht geeignet ist, da die DIV-Namen dynamisch mithilfe von XSLT generiert werden.

Antwort:

getElementsByClassName-Methode:

Moderne Browser unterstützen nativ die Methode getElementsByClassName. Sie können die Verfügbarkeit prüfen und sie verwenden, wenn sie unterstützt wird.

Dustin-Diaz-Methode (für ältere Browser):

Verwenden Sie für ältere Browser die Dustin-Diaz-Methode:

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // Native implementation exists
    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);
  }
}

Aktualisiertes Umschaltskript:

Verwenden Sie die getElementsByClassName-Methode oder den Dustin Diaz-Fallback in Ihrem Umschaltskript:

<code class="javascript">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';
     }
  }
}

Verwendung :

Ändern Sie in Ihrem HTML die Onclick-Attribute Ihrer Toggle-Links, um auf die neue Funktion toggle_visibility zu verweisen:

<code class="html"><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></code>

Das obige ist der detaillierte Inhalt vonWie wähle ich HTML-Elemente nach Klassennamen in JavaScript aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!