首页 > web前端 > js教程 > 如何使用 JavaScript 通过类名切换多个 HTML 元素的可见性?

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

Barbara Streisand
发布: 2024-11-14 18:06:02
原创
1029 人浏览过

How to Toggle the Visibility of Multiple HTML Elements by Class Name with JavaScript?

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板