• javascript隐藏元素的方法都有哪些?
  • 发布于 1个月前
  • 46 热度
    0 评论
在日常开发中,我们通用会选择使用 javascript 切换类来控制它们的状态样式,比如 .open、.closed,.show、.hide。在本篇文章中,我们将探索以下几个方面内容:
1.在元素没有子元素的情况下,使用 :empty 伪类来隐藏元素
2.将 :empty 与 :has() 和 :not() 结合使用,可以处理更多情况

3.梳理隐藏元素的常见方法


一.隐藏一个空元素
:empty 伪类可以匹配任何没有子元素的元素。当前已经得到所有主流浏览器的支持。如果该元素是一个空元素,我们可以结合 display 属性使用来隐藏元素。

示例:
<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:empty {
    display: none;
  }
</style>


<div class="box">1</div>
<div class="box"></div>
<div class="box">3</div>
<div class="box">4</div>
效果如下:

二.和 :has() 和 :not() 结合使用
和 :has() 和 :not() 结合使用时,我们可以在更多复杂场景中使用,比如查找子元素有空元素的元素、隐藏一个不包含某个子元素的父元素等。

2.1.查找子元素为空的父元素
下面的例子是每个 .box 盒子都有一个 span 元素,其中 3 个 span 元素是有文本节点的,一个没有。通过和 :has() 结合使用,我们可以先找到子元素为空的原生 span:empty, 然后通过 .box:has(span:empty) 判断 .box 下是否有子元素 span 为空的父元素,并隐藏它。
<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(span:has(:empty)) {
    display: none;
  }
</style>
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span></span></div>
<div class="box"><span>4</span></div>
效果如下: 

2.2.查找不包含某个子元素的父元素
下面的示例是首先查找 .box 元素下有 .text 子元素的父元素,然后使用 .box:not() 进行取反操作,结合 display 属性对元素执行隐藏。
<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(.box:has(.text)) {
    display: none;
  }
</style>
<div class="box"><span class="text">1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span class="text">4</span></div>
效果如下: 

三.隐藏元素的常见方法
方法一:display: none
此方法使用的最多,该方法会使 DOM 隐藏,触发 Reflow 和 Repaint。

方法二:visiblity: hidden
此方法 DOM 结构无变化,隐藏后仍占据空间,仅会触发 Repaint。结构保留,占据空间,仅触发重绘,不会触发事件(无法选中)。

方法三:opacity: 0
此方法 DOM 结构无变化,隐藏后仍占据空间。

方法四:content-visibility: hidden
它能让用户代理跳过元素的呈现工作(包括布局和绘制),直到需要时才进行,这使得初始页面加载速度大大加快。

方法五:position + left + top
它能让元素脱离文档流,不占用空间,并且通过设置 left 或者 top 属性负值,可以将元素定位到屏幕之外。

方法六:transform: translate(-999px)
它能让元素偏移出视图窗口,空间会占据,但元素实际不在视窗内所以无法交互。

方法七:font-size: 0
通过设置字体大小为0,将行内元素内容隐藏,但是实际空间还在。

方法八:width:0;height:0;overflow:hidden
通过设置元素宽高为0和设置 overflow: hidden 来实现元素隐藏,不占空间。

方法九:hidden property
通过设置 html 标签的 hidden 来实现元素隐藏。

方法十:clip-path
clip-path属性会创建一个裁剪区域,用于确定元素的哪些部分可见。使用clip-path: circle(0)可以达到将元素隐藏的效果。

方法十一:filter: blur(0)
将一个元素的模糊度设置为0, 从而使这个元素“消失”在页面中。

四.最后
随着浏览器对 :empty 、:has() 、:not() 等伪类和方法的支持越来越好,之前使用 js 来实现的功能,完全可以使用 CSS 来替换,替换后有着更好的性能和用户体验。本文最后梳理了隐藏元素的常见方法,如果你有其他方法,欢迎在文章下方留言告诉我。
用户评论