如何隐藏DOM元素
在CSS中,要隐藏DOM元素常见的方法有:
- 设置元素的
opacity
值为0
- 设置元素的
visibility
值为hidden
- 设置元素的
display
值为none
- 设置元素的
position
值为absolute
,并且将其移到不可见区域 - 设置元素
clip
(在新的CSS中使用clip-path
来替代clip
)
除此之外,还可以使用:
- 设置元素的
hidden
上面隐藏元素的方法都是大家常见的,也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说:
- 将元素的
font-size
、line-height
、width
和height
设置为0
- 设置元素的
transform
的translateX
或者translateY
的值为-100%
当然,或许在你的实战经验当中,你还有别的方案。对于其他的方案,我们不再罗列,咱们具体来看看各种隐藏DOM元素的差异。
隐藏DOM元素的差异性
上面简单的罗列了八种隐藏DOM元素的方式,其实给我们视觉上的效果,这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而,屏幕并不是唯一的输出机制,比如说,屏幕上看不见的元素(隐藏的元素),但其中一些隐藏元素的方式在屏幕阅读器中并没有隐藏,它依然能被屏幕阅读器读出来(因为屏幕阅读器依赖于可访问性树来阐述)。为了消除它们之间的歧意,我们将使用以下条款:
- 完全隐藏:元素既不在屏幕上可见,而且也不暴露在可访问性树上
- 语义上隐藏:元素在屏幕上呈现,但不暴露在可访问性树上
- 视觉上隐藏:元素没有在屏幕上呈现,但是暴露在可访问性树上
如何完全隐藏元素
针对上面所列的隐藏元素方式当中,能完全隐藏元素的方法有三种:
- 通过CSS设置元素的
display
属性值为none
- 通过CSS设置元素的
visibility
属性值为hidden
- 通过HTML5元素的属性值
hidden
(就是给元素声明一个hidden
属性值),比如<div hidden>
虽然上面的几种方法得到的结果相同,即内容在屏幕上不可见,屏幕阅读器也无法读到(不在可访问性树上),但它们之间还是有所差别的。
给DOM元素设置display:none;
来隐藏元素,将导致元素完全消失,而且不会占据任何的空间。如果通过visibility:hidden;
隐藏元素,元素虽然消失了,但会占据空间(其占据的空间和元素的大小有直接关系)。
如何隐藏DOM元素的更多相关文章
- 点击空白处隐藏指定dom元素(纯javascript方法)
<script type="text/javascript"> document.onclick = function (event) { event = event ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- 如何在通过knockout数据绑定的DOM元素上添加事件
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- CSS 隐藏页面元素的 几 种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
随机推荐
- 微信小程序-视图视图引用
引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...
- jmeter+ant+jenkins+mac环境搭建
一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.ANT环境:http://ant ...
- CSUOJ_1002
/* * Title : A+B(III) * Data : 2016/11/09 * Author : Andrew */ #include <iostream> #include &l ...
- U盘修复
方法一: 1.点开始-运行-输入cmd-format f: /fs: FAT32 (这里f:是指U盘所在盘符) 2.打开控制面板-管理工具-计算机管理-磁盘管理-找到U盘的所在的盘符--点右键--删除 ...
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- MemCache中的内存管理详解
MC的内存管理机制 1.内存的碎片化 当我们使用C语言或者其他语言进行malloc(申请内存),free(释放内存)等类似的命令操作内存的时候, 在不断的申请和释放的过程中,形成了一些很小的内存片段, ...
- ADO.NET 使用通用数据库操作类Database (SQL Server)
一.Web.config配置 <connectionStrings> <add name="constr_name" connectionString=" ...
- Centos 与本地终端 上传、下载 文件
首先安装lrzsz # yum -y install lrzsz 1.上传文件,执行命令rz,会跳出文件选择窗口,选择好文件,点击确认即可. # rz 运行rz命令后弹出选择文件窗口,找到要上传的文件 ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- 【WebGoat习题解析】AJAX Security->Insecure Client Storage
绕过前端验证可以通过两种办法:一是利用开发者工具进行debug:二是利用burpsuite直接抓取.本题解决思路如下: STAGE 1: For this exercise, your mission ...