总结css隐藏元素的几种方式

cp3_forever
884 阅读3分钟

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

前言

我们在写页面的时候，经常需要对元素执行隐藏操作，一般做法是用css的方法去隐藏，下面我把这些方法罗列一下，做一下对比，看完之后可以根据自己的需求来选择哪种方法。

隐藏元素

display: none

这个是用的比较多，直接把元素隐藏了，不占据任何空间，也不响应任何事件。

display:none会触发页面的重排和重绘。

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

image.png

可以看到元素two在页面中已经被隐藏了，不占据任何空间，所以就算你给它绑定事件，它也触发不了。

不过在dom结构上还是可以看到它，只是不在页面上显示。

visibility:hidden

visibility属性规定元素是否可见

有以下值：

  • visible： 默认值，可见
  • hidden： 不可见
  • collapse：用在table元素上，表现和display:none一致；用在其它元素上，表现和visibility:hidden一致
  • inherit： 继承父元素的visibility的属性

visibility值为hidden，元素不可见，但是还会占据空间，虽然它占据空间，但是如果给它绑定事件，它也不会触发。

visibility:hidden会触发页面的重绘，不会触发重排。

  <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('我是two!')
    })
  </script>

image.png

可以看到two虽然隐藏了，但是它的位置还是在，还会占据空间。我是给它绑定了click事件，但是点击它，并不会触发。

opacity: 0

设置元素的不透明度。 默认值是1(不透明)，最小值是0(全透明)。

给元素设置0,元素不可见，但是还会占据空间，而且，需要注意，此时给它绑定事件，它会触发。

opacity: 0会触发页面的重绘，不会触发重排。

  <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('我是two!')
    })
  </script>

image.png

image.png

跟visibility:hidden一样，它隐藏了，但是它还会占据空间，而且它还会触发绑定的事件。

transfrom: scale(0)

transfrom是css3新增的元素转换，scale代表缩放，1为不缩放，0为缩放最小。

transfrom: scale(0)会触发页面的重绘，不会触发重排。

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

image.png

不可见，还会占据空间，但是绑定的事件不会触发。跟visibility:hidden表现一致。

width和height设置为0

对元素的宽度和高度都设置为0, 如果它有子元素，还得设置overflow设置为hidden 。

width和height设置为0会触发页面的重排和重绘。

image.png

表现跟display:none一致，不占据空间，事件不会触发。

总结

用表格来总结下：

属性表现
display:none不占据空间，不会触发事件，触发重排和重绘
visibility:hidden占据空间，不会触发事件，只触发重绘
opacity: 0占据空间，会触发事件，只触发重绘
transfrom: scale(0)占据空间，不会触发事件，只触发重绘
width和height设置为0不占据空间，不会触发事件，触发重排和重绘

感谢你们的阅读。

avatar
文章
阅读
粉丝