Table of contents
Second, the implementation method of hiding page elements
1. Use display: none to achieve
3. Use opacity: 0 to hide elements
4. Set the width and height attributes to 0 to hide the element
5. Use absolute positioning position: hidden elements
I. Introduction
During our project development stage, we will definitely encounter many requirements that need to hide elements, and each requirement we encounter limits the need for specific methods to hide elements.
For example, in the game of Xiaoxiaole, when we successfully eliminate, we cannot use display:none to hide elements. This will cause the subsequent elements to recalculate the position of the element, causing the position to be confused. At this time, we should use visibility:hidden to achieve this effect.
Second, the implementation method of hiding page elements
1. Use display: none to achieve
This is our common method of hiding elements. By destroying the element, the element disappears completely. Instead of occupying the position, the following element will occupy the position occupied by the element, so rearrangement (reflow) will definitely be triggered .
Implementation:
The display is not set for the first element div
<div class="red" style="width: 100px; height: 100px; background: red"></div>
<div class="green" style="width: 100px; height: 100px; background: green"></div>The renderings are as follows
When setting the display for the first element , by setting the display for the first box and testing whether the click event is bound to the first box, it will trigger.
<div id="red" style="display: none; width: 100px; height: 100px; background: red"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
<script>
let red = document.querySelector('#red');
red.addEventListener('click', function () {
console.log('1111');
});
</script> 
The red box disappears completely, the green box behind occupies the position of the red box, and the custom event will not trigger
Features: Elements are invisible, do not occupy space, and cannot respond to click events
2. Use visibility:hidden to hide elements
By setting the element to be invisible to achieve the effect of hiding the element, the element still exists, but it is set to be invisible, so it only triggers redrawing and does not trigger rearrangement.
When setting visibility:hidden to the first element
<div id="red" style="visibility: hidden; width: 100px; height: 100px; background: red"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
<script>
let red = document.querySelector('#red');
red.addEventListener('click', function () {
console.log('1111');
});
</script>The effect is as follows, click on the first element position in the blank space, and cannot respond to the click event.
Features: Elements are invisible, occupy page space, and cannot respond to click events
3. Use opacity: 0 to hide elements
opacity attribute: used to set the transparency of the element, it is not only effective for color, but also for images or other elements in the page.
grammar:
opacity:value | inherit
value describe value Specifies the opacity, from 0.0 (completely transparent) to 1.0 (completely opaque) you inherit Should inherit the value of the opacity attribute from the parent element
By setting the element to be fully transparent (opacity: 0) to achieve the effect of hiding the element, it will occupy the original position and will not necessarily cause redrawing
When setting opacity:0 for the first element, the achieved page effect is the same as visibility, but by clicking on the first element, a custom event will be triggered.
Features: change the transparency of the element, the element is invisible, occupy the space of the page, and can respond to click events
4. Set the width and height attributes to 0 to hide the element
Block-level elements: block-level elements will occupy a single line (that is, they cannot be displayed in the same line as other elements, and block-level elements must be set in width and height to display normally. Therefore, we can achieve the effect of hiding elements by setting width and height to 0. No element is displayed on the page and does not occupy a position, so the click event will not take effect, and will definitely trigger rearrangement (changing the size of the geometric information of the element)
Code example:
<div id="red" style="background: red; width: 0; height: 0"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
Page effect, only the green box is displayed, the first box is not displayed and does not occupy the position, and the click event will not be triggered
Features: Elements are invisible, do not occupy page space, and cannot respond to click events
5. Use absolute positioning position: hidden elements
In essence, the element is removed from the page to achieve the effect of hiding the element
#red {
position: absolute;
left: -99999px;
top: -99999px;
}3. The difference between display:none, visibility:hidden, and opacity
| display:none | visibility:hidden | opacity:0 | |
| Does the page exist | does not exist | exist | exist |
| rearrange | meeting | Won't | Won't |
| redraw | meeting | meeting | uncertain |
| self binding event | does not trigger | does not trigger | can be triggered |
| transition (animation) | not support | support | support |
Rearrangement will definitely cause redrawing, but redrawing will not necessarily cause redrawing (I will explain redrawing and rearrangement in detail later)
Four. Summary
When we encounter a scene where elements need to be hidden, we can consider the final effect, whether to display elements, whether to bind custom events to trigger events, whether to add animation effects (implement transition effects), and also consider performance Aspects (that is, whether it will trigger rearrangement or redrawing) are issues we need to consider.
The above is the method and characteristics of hidden elements I summarized. Welcome to discuss and learn together.