如何使用 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) {
return node.getElementsByClassName(className);
} else {
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中文网其他相关文章!