Display and hide CSS elements

“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

There are many ways to show and hide HTML elements, and different methods have different effects and are suitable for different scenarios. This article is mainly a summary.

Summary of element hiding methods

If you want the element to be invisible, unclickable, not taking up space, the resource to load, and the DOM to be accessible:display: none
DOM is accessible if you want the element to be invisible, unclickable, take up space, and load resources:visibility: hidden
If you want the element to be invisible, clickable, space-consuming, DOM accessible:opacity: 0
If you want the element to be invisible, clickable, space-free, and DOM accessible:opacity: 0; position: abolute;
If you want the element to be invisible, unclickable, space-consuming, DOM accessible:position: relative; z-index: -1;
If you want the element to be invisible, unclickable, space-free, and DOM accessible:position: absolute; z-index: -1;

There are also newer approaches

CSS transform: scale transform

figure {
    transform: scale(0);
}
Copy the code

HTML5 hidden attribute

Hidden property effect and display: None; The same

<figure id="oymyakon" hidden>
Copy the code

Zero height and hidden overflow

figure {
    height: 0;
    overflow: hidden;
}
Copy the code

Blur Filter

figure{
    filter: blur(100px);
}
Copy the code

Display: None and visibility: hidden

display: noneThe elements of theta don’t take up any space,visibility: hiddenElement space reserved.
display: noneIt affects CSS3transitionTransition effect,visibility: hiddenDon’t.
display: noneHiding produces repaint and relFOW,visibility: hiddenIt will only trigger a redraw.
Collective punishment:

display: noneNone of the node and descendant node elements are visible,

visibility: hiddenDescendant node elements of the node can be setvisibility: visibleDisplay.

visibility: hiddenAttribute values are inheritable, so descendant elements are inherited by defaulthiddenHidden, but when descendant elements reset tovisibility: visibleIt can’t be hidden.

V-if and V-show

V-if controls the explicit and implicit elements by controlling the presence or absence of DOM nodes. V-show sets the DOM element’s display style, block to show, and None to hide.
V-if is “true” conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch. V-show is simply a CSS-BASED switch;
V-if has higher switching consumption; V-show has a higher initial render cost.

It is recommended to read the official Vue documentation for the explanation of V-IF vs V-show

Four cases,

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: auto;
            padding: 0 30px;
            display: flex;
        }

        .article {
            padding: 15px 20px;
        }

        figure {
            margin: 0;
            padding: 15px 20px;
        }

        .display-none {
            display: none;
        }

        .visibility-hidden {
            visibility: hidden
        }

        .opacity-0 {
            opacity: 0
        }

        .opacity-0_and_position-absolute {
            opacity: 0;
            position: absolute;
        }

        .position-relative_and_z-index--1 {
            position: relative;
            z-index: -1;
        }

        .position-absolute_and_z-index--1 {
            position: absolute;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>display: none</h1>
        </div>
        <figure class="display-none">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>visibility: hidden</h1>

        </div>
        <figure class="visibility-hidden">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>opacity: 0</h1>

        </div>
        <figure class="opacity-0">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>opacity: 0;</h1>
            <h1>position: absolute;</h1>

        </div>
        <figure class="opacity-0_and_position-absolute">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>position: relative;</h1>
            <h1>z-index: -1;</h1>

        </div>
        <figure class="position-relative_and_z-index--1">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

    <div class="wrap">
        <div class="article">
            <article>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star. The emperor makes a decision, but god admires her. Kereqing firmly believes that things related to human destiny should be done by human beings, and human beings can do it better. She worked harder than anyone else to prove it.</article>
            <h1>position: absolute;</h1>
            <h1>z-index: -1;</h1>

        </div>
        <figure class="position-absolute_and_z-index--1">
            <img src="Https://img0.baidu.com/it/u=4099495319, 1705263726 & FM = 26 & FMT = auto" alt>
            <figcaption>Clear is the game "original God" in the 5 star thunder system role, one of the seven stars of Bori moon, Yu Heng Star</figcaption>
        </figure>
    </div>
    <hr>

</body>

</html>
Copy the code

Display and hide CSS elements

Display and hide CSS elements

Summary of element hiding methods

Display: None and visibility: hidden

V-if and V-show

Four cases,

Related Posts

Talk about burial sites and surveillance

Web Vulnerability exploitation –XSS injection attack

⑥ Performance optimization, Web security, Linux common commands