从隐藏元素谈起

字节拓星人
• 阅读 2263

前言

    说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法,总结如下表格:

  overflow opacity visibility display position clip(clip-path) z-index
属性值 hidden 0 hidden none absolute rect()/inset()/polygon() -1000

我们为什么会需要这么多隐藏元素的方法呢,而且他们看起来实现的都是同样的效果。其实每一种方法实际上都有一些细微的不同,这些不同决定了在一些特定场合下使用哪一种方法。我们下面细细探讨下这些细微之处.

1. overflow

.hide{
     overflow:hidden; /* 占据空间,无法点击 */ 
}

overflow的hidden用来隐藏元素溢出部分,占据空间,无法响应点击事件。

2.opacity

.hide{
    opacity:0;/* 占据空间,可以点击 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 占据空间,可以点击 */
}

过滤元素filter也可使用opacity值设置透明度,不过filter现在的兼容性不好,只支持webkit内核,这里顺带一提。

opacity是用来设置元素透明度的,但当设置成0的时候也就相当于隐藏元素了。因此,元素依然存在原来的位置,占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素,很不幸,你并不能如愿。元素和它所有的内容会被读屏软件阅读,就像网页上的其他元素那样。换句话说,元素的行为就和它们不透明时一致。

3.visibility

.hide{
    visibility:hidden; /* 占据空间,无法点击 */
}

如同 opacity 属性,被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏

4.display

.hide{
    display:none;/* 不占据空间,无法点击 */ 
}

经典的display隐藏元素,这个是彻底的隐藏了元素,不占据空间,也就不影响布局,当然也无法响应事件。

5.position

.hide{
    position:absolute;
    left:-99999px;
    top:-90999px;/* 不占据空间,无法点击 */ 
}
.hide——2{
    position:relative;
    left:-99999px;
    top:-90999px;/* 占据空间,无法点击 */ 
}

假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity 和 visibility 影响布局, display 不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下采用这种办法未尝不可

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间,无法点击 */ 
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过 clip 属性来实现,但是这个属性被废弃了(现在浏览器依然支持),换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有,可以很容易的实现一些复杂的图形大漠老师分享的一个链接,该链接里的图形大多都是用clip-path的polygon值来实现的。但可惜的是依旧只能在chrome40+浏览器里使用.

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间,无法点击 */ 
}

通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

后记

在这篇教程里,我们看了 7 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性,随着时间推移,你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题,请在评论中留言。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
Easter79 Easter79
3年前
thymeleaf在工作中遇到的问题及解决办法(四)
1、关于字符串拼接的问题       字符串拼接可以使用如下方式。<ahref""th:text"第${StartNo}页''共${countPage}页"       还有一种更优雅的方式,使用“||”减少了字符串的拼接,代码如下。<ahref""th:
Stella981 Stella981
3年前
Selenium Webdriver——操作隐藏的元素
作者何坤158109016@qq.com(https://www.oschina.net/action/GoToLink?urlmailto%3A158109016%40qq.com) V2.02017/3/26.更多内容请到:www.snappydata.top(https://www.oschina.net/action/GoToLin
Stella981 Stella981
3年前
Jira 使用手册
<tablestyle"width:100%;margin:200px0300px0;"<tr<thDate</th<thRevisionversion</th<thDescription</th<thauthor</th</tr<tr<td20180614</td<tdV1.0.0</td
Wesley13 Wesley13
3年前
2020软件工程作业03
<styletable{width:100%;/\表格宽度\/margin:auto;/\外边距\/emptycells:show;/\单元格无内容依旧绘制边框\/fontsize:18px;}table,th,td{border:2pxsolidpink;}li{fontsize:1
Wesley13 Wesley13
3年前
24个ES6方法,用来解决实际开发的JS问题!!
本文主要介绍24中es6方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。1、如何隐藏所有指定的元素:consthide(el)Array.from(el).forEach(e(e.style.display'none'));//事例:隐藏页面上所
Wesley13 Wesley13
3年前
Java 日期与时间
Java的日期Java没有内置的日期类,但可以导入java.time包,这个包中包含了许多类,可用于处理日期和时间。例如:<table<tbody<tr<thstyle"width:25%"Java类</th<thstyle"width:75%"描述</th</tr<tr<td<code
Wesley13 Wesley13
3年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
Wesley13 Wesley13
3年前
C# 线程基础
1 线程是进程中的一个执行流 2线程是一个可以单独操作的活动3线程创建和常用方法 a 创建    Thread thnewThread(Method); b常见方法 th.start()//启动线程 th.Abort()//终止线程 Thread.Sleep(n)//休眠线程(停止n毫秒后继续执
Stella981 Stella981
3年前
99th Packers and Movers Services
99th.co.inistheleadingsearchdirectoryforIndia.Hereonecanfindtheverifiedcompaniesinanyindustryliketransport,logistics,packers&moversservice,BusinessService
吴押狱 吴押狱
1年前
测试用
Inrecentyears,theOscarshavebeenwidelycriticized.Frombeingtoopoliticallycorrecttolackinginnovation,andwithplummetingviewership,th
字节拓星人
字节拓星人
Lv1
梦里分明见关塞,不知何路向金微。
文章
5
粉丝
0
获赞
0