css_元素的显示与隐藏

乖女子@@@

已于 2022-10-24 19:02:10 修改

阅读量618

点赞数

分类专栏： 2022_html+css 文章标签： css css3 html

于 2022-09-28 10:00:45 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/127077930

版权

2022_html+css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

 <body>
    <ul>
      <li onclick="li1()">
        <h1>我是老大</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老大
      </li>
      <li onclick="li2()">
        <h1>我是老二</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老二
      </li>
      <li onclick="li3()">
        <h1>我是老三</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老三
      </li>
      <li>
        <h1>我是老四</h1>
        <p>略略略</p>
      </li>
    </ul>
  </body>

<style>
    li:first-child {
      display: none;
    }
    li:nth-child(3) {
      visibility: hidden;
    }
    li:nth-child(5) {
      opacity: 0;
    }
  </style>

在这里插入图片描述
通过上述代码可以看出，只有display隐藏元素时不占据位置，其余的在隐藏元素时都占据位置

[2]隐藏后子元素是否显示

通过上述检测元素隐藏后是否占有位置的例子可以看出->元素隐藏后，子元素都被隐藏了！
那若是现在设置子元素显示，子元素是否能够正确显示呢？

 <ul>
      <li onclick="li1()">
        <h1>我是老大</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老大
      </li>
      <li onclick="li2()">
        <h1>我是老二</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老二
      </li>
      <li onclick="li3()">
        <h1>我是老三</h1>
        <p>略略略</p>
      </li>
      <li>
        上面是老三
      </li>
      <li>
        <h1>我是老四</h1>
        <p>略略略</p>
      </li>
    </ul>

li:first-child {
      display: none;
    }
    li:first-child h1 {
      display: block;
    }
    li:nth-child(3) {
      visibility: hidden;
    }
    li:nth-child(3) h1 {
      visibility: visible;
    }
    li:nth-child(5) {
      opacity: 0;
    }
    li:nth-child(5) h1 {
      opacity: 1;
    }

在这里插入图片描述
如上述代码所示，仅有visibility设置子元素显示可以正常显示，其余都不能让子元素正常显示

[3]元素隐藏后设置的事件是否还有做用

通过设置点击事件检测可以得出，仅有opacity设置的事件还有做用(因为它相当于只是将元素设置为透明，元素还存在)，其余的设置的事件都没有做用。

总结-区别

display
- display:none;是直接将元素不在dom树上挂载了，适用于只渲染一次的场景。
- 隐藏元素时-该元素被隐藏，不占据位置；
- 隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；
- 元素隐藏时-对该元素设置的事件将不起做用；
visibility
- visibility:hidden；是将元素还在dom树上挂载，但是隐藏掉了，适用于元素频繁显示隐藏的场景。
- 隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
- 隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；
- 元素隐藏时-对该元素设置的事件将不起做用；
opacity
- opacity:0;本质并没有将元素隐藏，仅是将元素变透明了，但是具有穿透性！
- 隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
- 隐藏元素时-子元素被一起隐藏，且不可以通过opacity:1;将子元素显示；
- 元素隐藏时-对该元素设置的事件还有做用(可以通过点击空白触发事件)；

示例

在某些情况下，我们需要美化我们的界面，如下
在这里插入图片描述
这是一个分享功能，需要触发小程序的分享，这个分享需要使用button组件来实现，但是呢button组件的样式比较丑。
此时我们可以使用button覆盖该元素并设置opacity为0

[1] 实现样式看一起和目标一致；
[2] button组件设置的点击事件还会起作用；

乖女子@@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css_元素的显示与隐藏

display隐藏元素时-该元素被隐藏，不占据位置；隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；visibility隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；opacity隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
复制链接

扫一扫