如何在 JavaScript 中透過類別名稱選擇 HTML 元素？

如何使用 JavaScript 取得ElementByClass？

問題：

您的目標是切換可見性使用 JavaScript 片段基於其類的 DIV 元素。但是，目前腳本依賴 getElementById，這是不合適的，因為 DIV 名稱是使用 XSLT 動態產生的。

答案：

getElementsByClassName 方法：

現代瀏覽器原生支援 getElementsByClassName 方法。您可以檢查其可用性並在支援的情況下使用它。

Dustin Diaz 方法（對於較舊的瀏覽器）：

對於較舊的瀏覽器，請使用Dustin Diaz 方法：

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

更新的切換腳本：

在切換腳本中使用getElementsByClassName 方法或Dustin Diaz 後備：

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

用法:

用法:< >

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

在HTML 中，修改切換連結的onclick 屬性以引用新的toggle_visibility 函數：

以上是如何在 JavaScript 中透過類別名稱選擇 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！