如何使用 JavaScript 通过类名切换多个 HTML 元素的可见性？

如何使用 JavaScript 按类名称切换 HTML 元素的可见性

您想要动态控制网页上特定 DIV 的可见性。但是，当前的 JavaScript 脚本依赖于 getElementById，这不适合，因为您的 DIV 是通过类名而不是 ID 来标识的。

要克服这一挑战，您可以利用现代浏览器支持的 getElementsByClassName 方法。这是一个全面的解决方案：

function getElementsByClassName(node, className) {
  if (node.getElementsByClassName) {
    // Native implementation available
    return node.getElementsByClassName(className);
  } else {
    // Use fallback method
    return (function getElementsByClass(searchClass, node) {
      if (!node) node = document;
      var classElements = [],
          els = node.getElementsByTagName("*"),
          pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");

      for (var i = 0, j = 0; i < els.length; i++) {
        if (pattern.test(els[i].className)) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    })(className, node);
  }
}

现在，您可以修改切换脚本以使用 getElementsByClassName：

function toggleVisibility(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';
     }
  }
}

此更新的脚本允许您使用以下命令无缝切换多个 DIV 的可见性相同的类名。

以上是如何使用 JavaScript 通过类名切换多个 HTML 元素的可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！