有没有更快的方法来隐藏/显示 html 元素？

Question

我想要一种更快的方式来显示/隐藏大约 20000 多个 dom 元素。

我发现使用element.style.display = "none"很慢

我认为是因为我导致浏览器的回流过多。

但是仅仅element.style.visibility = "hidden"是不够的，因为元素的高度仍然存在

有没有更好的办法？

我只能使用谷歌关闭

有一个可运行的例子。 但是在我的项目中，大约有 20000 多个复选框

 function filter_change (txt) { var eles = document.getElementsByClassName("checkbox_container"); for (var i = 0; i < eles.length; i++) { var cnt = eles[i]; var ipt = cnt.getElementsByTagName("input")[0]; if (ipt.id.indexOf(txt.value) < 0) { cnt.style.display = "none"; } else { cnt.style.display = "flex"; } } }

 <html> <head> </head> <body> <input type="text" onkeyup="filter_change(this)" /> <div class="parent"> <div class="checkbox_container"> <input type="checkbox" id="checkbox_1" value="checkbox_1" class="checkbox_input"> <label for="checkbox_1" class="checkbox_label">checkbox_1</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_2" value="checkbox_2" class="checkbox_input"> <label for="checkbox_2" class="checkbox_label">checkbox_2</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_3" value="checkbox_3" class="checkbox_input"> <label for="checkbox_3" class="checkbox_label">checkbox_3</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_4" value="checkbox_4" class="checkbox_input"> <label for="checkbox_4" class="checkbox_label">checkbox_4</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_5" value="checkbox_5" class="checkbox_input"> <label for="checkbox_5" class="checkbox_label">checkbox_5</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_10" value="checkbox_10" class="checkbox_input"> <label for="checkbox_10" class="checkbox_label">checkbox_10</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_100" value="checkbox_100" class="checkbox_input"> <label for="checkbox_100" class="checkbox_label">checkbox_100</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_1000" value="checkbox_1000" class="checkbox_input"> <label for="checkbox_1000" class="checkbox_label">checkbox_1000</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_10000" value="checkbox_10000" class="checkbox_input"> <label for="checkbox_10000" class="checkbox_label">checkbox_10000</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_15000" value="checkbox_15000" class="checkbox_input"> <label for="checkbox_15000" class="checkbox_label">checkbox_15000</label> </div> <div class="checkbox_container"> <input type="checkbox" id="checkbox_20000" value="checkbox_20000" class="checkbox_input"> <label for="checkbox_20000" class="checkbox_label">checkbox_20000</label> </div> </div> </body> </html>

Answer 1

您可以使用 CSS：

.checkbox_container input[id*='15'] {
   display: none;
}

看到这个小提琴

或者在你的 javascript 代码中使用 CSS 选择器，然后添加类：

document.querySelectorAll('.checkbox_container input[id*="' + txt.value '"]')
   .forEach(el => el.classList.add('hidden'))

将“隐藏”类定义为：

.hidden { display: none; }

重要的

使用您的 javascript 代码，确保您验证txt.value以便它只包含对 CSS 类名称有效的字符。

有没有更快的方法来隐藏/显示 html 元素？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-20 03:35:42

有没有更快的方法来隐藏/显示 html 元素？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-20 03:35:42

解决方案1
0 已采纳 2019-02-20 03:35:42