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

Display and hide CSS elements

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

  1. 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
  2. DOM is accessible if you want the element to be invisible, unclickable, take up space, and load resources:visibility: hidden
  3. If you want the element to be invisible, clickable, space-consuming, DOM accessible:opacity: 0
  4. If you want the element to be invisible, clickable, space-free, and DOM accessible:opacity: 0; position: abolute;
  5. If you want the element to be invisible, unclickable, space-consuming, DOM accessible:position: relative; z-index: -1;
  6. If you want the element to be invisible, unclickable, space-free, and DOM accessible:position: absolute; z-index: -1;

There are also newer approaches

  1. CSS transform: scale transform
figure {
    transform: scale(0);
}
Copy the code
  1. HTML5 hidden attribute

Hidden property effect and display: None; The same

<figure id="oymyakon" hidden>
Copy the code
  1. Zero height and hidden overflow
figure {
    height: 0;
    overflow: hidden;
}
Copy the code
  1. Blur Filter
figure{
    filter: blur(100px);
}
Copy the code

Display: None and visibility: hidden

  1. display: noneThe elements of theta don’t take up any space,visibility: hiddenElement space reserved.
  2. display: noneIt affects CSS3transitionTransition effect,visibility: hiddenDon’t.
  3. display: noneHiding produces repaint and relFOW,visibility: hiddenIt will only trigger a redraw.
  4. 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

  1. 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.

  2. 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;

  3. 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