Is there any faster way to hide/show html element?
Question
I want a faster way to show/hide about 20000+ dom element.
I found that it is very slow using element.style.display = "none"
I think it's because I cause too many reflows of the browser.
But just element.style.visibility = "hidden" is not enough because the height of the element still exists
Is there any better way?
I can only use google closure
There is a runable example. But in my project, there are about 20000+ checkboxes
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>
1 answers
solution1
0 ACCPTED 2019-02-20 03:35:42
You can use CSS:
.checkbox_container input[id*='15'] {
display: none;
}
See this fiddle
Or use CSS selector in your javascript code, and add class instead:
document.querySelectorAll('.checkbox_container input[id*="' + txt.value '"]')
.forEach(el => el.classList.add('hidden'))
defining class 'hidden' as:
.hidden { display: none; }
IMPORTANT
With your javascript code, make sure you validate txt.value so that it only contains characters valid for a CSS class name.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.