从隐藏元素谈起

XanaHopper 发布于2019-08-29 11:07 / 1483人阅读

摘要：前言说起隐藏元素我想每一个前端都能说起几种，但能说全的我想就不是很多了。因此，元素依然存在原来的位置，占据空间也可响应事件。占据空间，无法点击如同属性，被隐藏的元素依然会对我们的网页布局起作用。

前言

说起隐藏元素我想每一个前端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 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题，请在评论中留言。

GPU云服务器云服务器隐藏元素 js点击元素隐藏 js实现元素隐藏 js实现元素隐藏显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111435.html

CSS布局 ——从display，position， float属性谈起

摘要：生成相对定位的元素，相对于元素本身正常位置进行定位。元素的位置通过以及属性进行规定。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过属性控制叠放顺序，越高，元素位置越靠上。页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Maste...

hover_lew 2019-04-23 13:44 评论0 收藏0
谈起音视频，前端能做些什么

摘要：音视频音视频随着互联网的发展，对音视频的需求越来越多，然而音视频无乱是播放还是编解码，封装对性能要求都比较高，那现阶段的前端再音视频领域都能做些什么呢。 @(音视频)[Audio|Video|MSE] 音视频随着互联网的发展，对音视频的需求越来越多，然而音视频无乱是播放还是编解码，封装对性能要求都比较高，那现阶段的前端再音视频领域都能做些什么呢。 [TOC] 音频或视频的播放 htm...

魏明 2019-08-26 12:24 评论0 收藏0
如何内行地评价公链（一）从真正的不可能三角谈起

摘要：在第一期，我们从区块链的不可能三角谈起，谈一谈如果要追求极致的效率，究竟要牺牲什么。今天，我们来介绍另一个不可能三角。这个不可能三角包括三个目标。超高吞吐率最终确认交易的平均吞吐率超过称之为超高吞吐率。 showImg(https://segmentfault.com/img/remote/1460000018479164?w=1080&h=460);最近几期，Conflux 计划推出...

VPointer 2019-06-25 19:08 评论0 收藏0