opacity: 0, visibility: hidden, display: none can make the element invisible, what is the difference between them?
We create three divs and set the style to get the following effect:
<div class="container">
<div class="display">display</div
><div class="visibility">visibility</div
><div class="opacity">opacity</div>
</div>
element performance
display: none, does not render the element, does not take up space, and cannot be clicked.
visibility: hidden, renders the element, but the element is invisible, takes up space, and cannot be clicked.
opacity: 0, rendering elements, but the elements are invisible, occupy space, and can be clicked.
display: none;
Set the attribute value of the div with class name display to none, the element will not be displayed on the page and occupy no space, and the position of the div with class name visibility and opacity will move forward.
.display {
display: none;
}
**visibility: hidden; **
Set the attribute value of the div whose class name is visibility to hidden, and the element will not be displayed on the page and occupy the position.
.visibility {
visibility: hidden;
}
**opacity: 0; **
Set the value of the div attribute with the class name opacity to 0, and the element will not be displayed on the page and occupy the position.
Click on the element
The display property of the element is set to none, and it will not be rendered in the browser, so it cannot be clicked. When the attribute is set to visibility and opacity the element still exists on the page, it just doesn't show up. Let's take a look at the click situation, add a click event to each element, click on the div with the class name visibility, no click event is triggered, when you click the div with the class name opacity, the click event is triggered, and the console prints out the log .
const display = document.querySelector('.display')
const visibility = document.querySelector('.visibility')
const opacity = document.querySelector('.opacity')
display.addEventListener('click', () => {
console.log('display', )
})
visibility.addEventListener('click', () => {
console.log('visibility', )
})
opacity.addEventListener('click', () => {
console.log('opacity', )
})
Inheritance
display: none, none.
visibility: hidden, the child element inherits its properties, and the descendant element does not display because it inherits the property of visibility: hidden. When visibility: visible is set for the descendant element, its descendant node can be displayed.
opacity: None.
performance
display: none, modifying element attributes will cause document reflow and redrawing, which consumes a lot of performance.
visibility: hidden, modifying element properties will only cause the document to be redrawn, and the performance consumption is small.
opacity: 0, modifying element attributes will only cause the document to be redrawn, and the performance consumption is small.