将页面元素隐藏的10种方法
在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素。
本文将通过对当前所有可用的隐藏元素的方法做一个总结,大概有10种方法可以使用,一一做下介绍。
所有方法的总结在文章的最后,可以跳过前文。
display:none
display
属性用于设置页面元素的显示方式,能够控制元素的显示或者隐藏,当它的值被设置为 none
时,就会隐藏对应的元素,使其不可见。
这种方法是最常用的隐藏元素的方法,可以让元素在网页中完全消失,不会占据页面上的任何空间,用户无法看到或进行交互。
但是,这样也会导致元素脱离文档流,可能会影响其他元素的布局。
<div class="elem">这是一个要隐藏的元素。
</div>
.elem {display: none;
}
visibility:hidden
visibility
属性是专门用于控制元素的显示和隐藏,当它的值设置为 hidden
后,也会将元素隐藏。
但与 display
不同的地方在于,此时元素仍会占据页面上的空间,只是在视觉上不可见,显示为空白区域(所占区域为元素的大小)。
这种方式也是无法进行元素的响应事件监听和交互状态,通常应用于需要隐藏但仍需要占据空间的元素,如占位符、提示信息等。
.elem {visibility: hidden;
}
opacity: 0
opacity
属性用于控制元素的透明度,取值范围:0 - 1,0 表示完全透明,1 表示不透明。
当我们将元素的 opacity
属性设置为 0
时,该元素将会变为不可见状态,不过它仍会占据页面上的空间。
.elem {opacity: 0;
}
这种方式隐藏的元素,都是视觉上不可见,和 visibility:hidden
比较类似。
但不同的地方在于:opacity: 0
设置元素不可见以后,用户仍然能够与该元素进行交互,而 visibility:hidden
则不行。
.elem {opacity: 0;
}
.elem:hover {opacity: 0.5;
}
<div class="elem" onclick="alert(1)">这是一个要隐藏的元素。
</div>
如上代码所示,div.elem
元素设置 opacity: 0
不可见以后,onclick
鼠标点击事件会响应,hover
状态也会执行。
position
position
属性用于控制元素的定位方式,可以将元素在页面的不同位置进行定位,有多个取值,也是css中非常重要的属性,但我们这里只讨论如何隐藏元素。
当 position
取值相对定位或者绝对定位时,给定(left/top/right/bottom)四个方向上的任意一个较大的值(或负值),都能将元素设置到屏幕之外,达到不可见的状态。
在使用上,相对定位和绝对定位有一定的区别。
绝对定位的元素会脱离当前文档流,整个从视觉上完全消失,效果上与 display:none
相似。
.elem {position: absolute;left: -9999px;
}
而相对定位则只是将元素移出,在当前位置仍然会占据一定的空间,效果上与 visibility:hidden
较相似。
.elem {position: relative;top: -9999px;
}
但使用的定位的方式使元素不可见,都无法再与元素进行交互操作。
在绝对定位时,还可以通过
z-index
属性将元素的层级调低,让它被其他元素遮挡,达到一定的隐藏效果。
clip-path:circle(0%)
clip-path
属性,允许用不同的剪切方式创建元素的可显示区域,区域内的内容可以展示,区域外的内容则隐藏。之前也有博文详细介绍该属性,clip-path详解
根据它的特点,如果将元素的所有内容都设置到显示区域外,则元素就自动隐藏了,达到不可见的状态,而要实现这点只需要剪切区域设置为0,有多个形状值可以实现:
.elem {clip-path: circle(0%);clip-path: inset(50%);clip-path: polygon(0 0);
}
这种方式隐藏的元素,虽然不可见,但仍然会占据自身大小的空间,效果上与 visibility:hidden
相似。并且也不能响应事件监听和各种交互状态。
filter:blur(500px)
filter
属性是CSS3开始提供的,用于对页面元素设置各种滤镜效果,有大概十多个各种不同的滤镜值可以设置,我们这里使用 blur
模糊效果来达到隐藏页面元素的效果。
只需要将 blur()
值设置为一个较大的值,元素将模糊到无法显示的地方,如值大于400:
.elem {filter: blur(500px);
}
通过以上代码,就能将元素进行隐藏了,他的效果与使用 opacity: 0
一样,元素虽不可见,但仍占据空间,并且能够响应事件和交互状态。
注意:filter:opacity(0)
透明滤镜与 opacity: 0
也一样。
HTML Element 的 hidden 属性
通过设置页面元素(Element)的 hidden
属性,也能够将元素进行隐藏,它达到的效果与 display:none
几乎一样,元素脱离文档流、不可见,不占用空间,无法响应事件和用户交互等。
<div hidden>这个元素将被隐藏,不占用空间,无法交互。</div>
以上方式,针对的页面元素,是不区分块状元素和行内元素,都能够达到隐藏效果,下面还有几种方式,可能针对特定的元素才起作用。
width: 0
这个方式代表一类隐藏元素的方法,即通过设置元素的宽高属性为 0
,达到隐藏元素的效果。
注意,行内元素无法设置宽高属性,所以这种方法一般处理块状元素。
.elem {width: 0;height: 0;
}
以上代码,就能将块状元素进行隐藏,不占据空间,并且这种方式隐藏的块状元素也无法响应事件和交互状态。
但如果块状元素内包含文字,则文字内容仍然会显示,并且呈竖状:
因此,这类方法平时很少会使用。
那如果想把文本内容也隐藏,有没有办法呢?那就要用到下面的属性了。
font-size: 0
font-size
用于设置文字的大小,当我们把它的值设置为 0
时,文本内容就不可见。
.elem {font-size: 0;
}
如果是行内元素,或者块状元素内只包含文字,则单独使用 font-size: 0
都可以隐藏。
但我们可以结合宽高和文字大小属性一起使用,就能达到完整的隐藏效果,而不分块状元素还是行内元素,都能起作用:
.elem {width: 0;font-size: 0;
}
这种方式,行内元素将占据空间,而块状元素则不占,都无法进行交互。
transform:scale(0)
transform
属性用于对元素进行变换,例如旋转、缩放、平移等。其中,缩放 scale
就可以用来隐藏元素使用,只需要将 scale
的值设置为 0
,该元素就会被缩放到不可见的状态,达到隐藏效果:
.elem {transform: scale(0);
}
需要注意的是,transform:scale(0)
达成的隐藏效果,无法作用于行内元素,这是由于 transform
属性本身对行内元素不起作用。
并且,这种隐藏方式也会占用页面空间(元素的原始大小区域),但元素实际上宽高都为0,同样无法响应事件和交互。
其他
以上多数都是通过设置 css
属性达成的页面元素隐藏效果,但在前端开发中,很多时候,我们需要使用 JavaScript
来控制页面元素,包括隐藏也是一样的。
如,我们使用 JavaScript
代码来控制元素的 sdiplay
属性,以便可以隐藏或显示元素:
const element = document.getElementById('elementId')
element.style.display = element.style.display === 'none' ? 'block' : 'none'
以上代码,就是获取到元素对象,通过设置 style
样式对象的 display
属性,控制了它的隐藏和显示。
除此以外,我们还可以使用 JavaScript
对象将页面元素删除,如果要显示还可以再添加回来,通过这种方式也能达成影响和显示的效果:
const element = document.getElementById('elementId')
document.body.removeChild(element)
setTimeout(() => {document.body.appendChild(element)
}, 3000)
如上代码所示,我们将元素先通过文档对象的 removeChild
方法进行删除,再定时3秒以后,把该元素添加到文档中,这样,可算是隐藏和显示了。
总结
以上就是关于Web页面隐藏元素的10种方法(除去了JavaScript的方法),每种方法都有自身的特点,我们在实际开发过程中,需要根具体的需求和场景来选择最合适的方法。
下面,是针对这些方法的一个总结:
将页面元素隐藏的10种方法相关推荐
- CSS设置元素隐藏的4种方法
方法一 display:none <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- css中实现元素隐藏的几种方法
1.display:none; display翻译成中文是显示.展览的意思:将display的属性改为none可以实现元素的隐藏,元素和盒子模型也不生成,被隐藏的元素不占位置,看不见摸不着,它会导致浏 ...
- html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
- python与excel做数据可视化-用Python进行数据可视化的10种方法
原标题:用Python进行数据可视化的10种方法 2015-11-19 关于转载授权 大数据文摘作品,欢迎个人转发朋友圈,自媒体.媒体.机构转载务必申请授权,后台留言"机构名称+转载&quo ...
- 提高C程序效率的10种方法
任何代码的美丽不仅在于找到一个给定的问题的解决方案,但在它的简单性,有效性,紧凑性和效率(内存).设计的代码比实际执行更难 .因此,每一个程序员当用C语言开发时,都应该保持这些基本的东西在头脑中. 本 ...
- 元素隐藏的三种方式对比(针对移动端项目中的按钮,先隐藏且不能被点击 visibility:hidden)
元素隐藏的三种方式对比 display:none opacity:0 visibility:hidden 项目需求 表面一个图片遮罩,鼠标hover遮罩消失,内部元素展现,其中有一个按钮在移动端是手指 ...
- C 程序更有效率的 10 种方法
转至:http://blog.chinaunix.net/space.php?uid=26495963&do=blog&id=3062636 任何代码的美丽不仅在于找到一个给定的问题的 ...
- 让你的C程序更有效率的10种方法
PS:原文翻译的有些地方不太确切,尤其是对于第7点static的使用的翻译容易引起误解,故稍做调整,如有妥之处,还请谅解! 任何代码的美丽不仅在于找到一个给定的问题的解决方案,还在它的简单性,有效性, ...
- linux入门_Linux入门的10种方法
linux入门 文章什么是Linux用户? 作者:安德森·席尔瓦(Anderson Silva)明确指出,如今,只要您对"使用Linux"的定义足够广泛,人们使用Linux(以某种 ...
最新文章
- rh9.0虚拟机dmesg启动过程分析(2)
- @value 静态变量_Spring注解驱动开发之八——@Value属性赋值、@PropertySource 加载外部配置文件...
- Python爬虫 教程: re正则表达式解析html页面
- python图片二进制流转换成图片_python将图片二进制数据转换成Django file对象
- Nagios Apache报Internal Server Error错误的解决方法
- Mask RCNN笔记
- java.lang.IllegalArgumentException: Does not contain a valid host:port authority: ignorethis
- oracle 字段以逗号结尾的更新 数据库_Oracle数据库某个字段的值为逗号分隔的多个值组成的字符串,以一个多选的下拉框进行查询...
- 五大法则助你成为更出色的开发者|原力计划
- ps怎么撤销参考线_入门板绘怎么练习?怎么提高板绘技巧?(干货)
- Safari/Chrome浏览器打不开淘宝/天猫网页怎么办?
- angular4 跨域携带cookie的设置
- 干货 | 携程动态表单DynamicForm的设计与实现
- 【毕业设计】python opencv 深度学习 指纹识别算法实现
- 【计算机网络知识扫盲】十二、★Net命令详解☆
- mac iphone模拟器 真机 操作
- 如何下载百度地图离线包并导入OruxMaps
- js return加分号_js分号的重要性
- 视频转mp3格式转换器怎么使用
- css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果