There are two common ways to dynamically change the visibility of an element with javascript...
By modifying its style:
// occupies same space when hidden
elem.style.visibility = 'hidden' // 'visible' to unhide
// does not occupy any space when hidden
elem.style.display = 'none' // 'block' | 'inline' to unhide
By modyfying its classList:
elem.classList.add('hidden') // classList.remove('hidden') to unhide
.hidden {
visibility: hidden; /* occupies same space when hidden */
/* display: none; /* does not occupy any space when hidden */
}
ℹ️ There are other properties that can be used such as
opacity(See @Kingfish's comment), but they all must still be updated by either modifying theirstyleor theirclassList.
For one or a few elements, modifying style or classList will work the same. But I need to change the visibility of dozens or even hundreds of elements. For volume changes, Which methods is better in terms of the following?
I have a very fast computer so it is hard to know the impacts on people with more performance constrained devices.
All of the elements I want to show/hide in unison have a specific class. It seems most logical that I should be able to modify the CSS rules for that class, i.e. to set its CSS visibility property, rather than add/remove another class for each of the hundreds of members of the class. I've researched this and few people talk about it, which makes me wonder if it is considered a hack, not-compatible across browsers, or bad for some other reason.
Is there a well-founded explanation one way or the other?
Is there a third way?
Yes, there is. There's even a fourth way.
All of the elements I want to show/hide in unison have a specific class. It seems most logical that I should be able to modify the CSS rules for that class, i.e. to set its CSS visibility property, rather than add/remove another class for all of these elements.
Yes, this is possible, using the CSS Object Model. Get the styleheet defining the rule, get the rule for that class, change its definition.
It's not a hack, and has good browser support. It's rarely done because few people know about it, and because accessing the right rule is a bit fiddly (which you can work around by creating and inserting the rule object using CSSOM in the first place). I'm not certain how well-optimised it is - but it certainly needs less JS processing than to alter each individual element.
However, there's a much easier solution: use cascading style sheets!
body.hide-x .x {
display: none;
}
/* or, reverse:
.x {
display: none;
}
body.show-x .x {
display: inline;
}
*/
document.body.classList.toggle('hide-x');
This will show/hide all elements with class x inside the document, based on whether the show-x class is applied on the body or not.
You can replace display: none with visibility: hidden or opacity: 0 or any other property change you want to apply en masse depending on your needs.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments