Summarize the ways CSS hides elements

This is the 17th day of my participation in the August Text Challenge.More challenges in August

preface

When we write a page, often need to hide the elements, the general approach is to use CSS to hide, I put these methods listed below, do a comparison, after reading can choose which method according to their own needs.

Hidden elements

display: none

This one is used more often, hiding elements directly, taking up no space and responding to no events.

Display: None triggers reordering and redrawing of the page.

  <style>
    div {
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }

    .two {
      display: none;
    }
  </style>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
Copy the code

As you can see, element two is already hidden in the page and doesn’t take up any space, so even if you bind an event to it, it won’t fire.

It’s still visible in the DOM structure, but not on the page.

visibility:hidden

The visibility property specifies whether the element is visible

There are the following values:

• Visible: indicates the default value
• Hidden: Invisible
• Collapse: used to describe and collapse table elementsdisplay:noneConsistent; Used on other elements to represent sumvisibility:hiddenconsistent
• Inherit: Inherit the property of the parent element, visibility

Visibility is hidden, so the element is invisible, but it takes up space, and even though it takes up space, it won’t fire if you bind events to it.

Visibility: Hidden will trigger a redraw of the page, not a rearrangement.

  <style>
    div {
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }

    .two {
      visibility: hidden;
    }
  </style>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <script>
    let two = document.querySelector('.two')
    two.addEventListener('click'.() = > {
      console.log('I am two! ')})</script>
Copy the code

You can see that two is hidden, but it’s still there, it’s still taking up space. I bound it with a click event, but clicking on it doesn’t trigger.

opacity: 0

Sets the opacity of the element. The default value is 1(opaque) and the minimum value is 0(fully transparent).

If you set the element to 0, it’s invisible, but it still takes up space, and remember, if you bind an event to it, it fires.

Opacity: 0 triggers redrawing of the page, and does not trigger rearrangement.

  <style>
    div {
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }

    .two {
      opacity: 0;
    }
  </style>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <script>
    let two = document.querySelector('.two')
    two.addEventListener('click'.() = > {
      console.log('I am two! ')})</script>
Copy the code

Like Visibility: Hidden, it is hidden, but it takes up space, and it also fires bound events.

transfrom: scale(0)

Transfrom is a new element conversion in CSS3. Scale stands for scale, 1 for no scaling, and 0 for minimum scaling.

Transfrom: Scale (0) triggers a redraw of the page, not a rearrangement.

  <style>
    div {
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }

    .two {
      transform: scale(0);
    }
  </style>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
Copy the code

Invisible and takes up space, but bound events do not fire. Same as visibility:hidden.

Width and height are set to 0

Set the width and height of the element to 0, and if it has child elements, set overflow to Hidden.

Setting width and height to 0 triggers page rearrangement and redrawing.

Display the same as display: None, does not occupy space, the event will not fire.

conclusion

To summarize:

Thank you for reading.