在CSS中,要隐藏DOM元素常见的方法有:

  • 设置元素的opacity值为0
  • 设置元素的visibility值为hidden
  • 设置元素的display值为none
  • 设置元素的position值为absolute,并且将其移到不可见区域
  • 设置元素clip(在新的CSS中使用clip-path来替代clip

除此之外,还可以使用:

  • 设置元素的hidden

上面隐藏元素的方法都是大家常见的,也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说:

  • 将元素的font-sizeline-heightwidthheight设置为0
  • 设置元素的transformtranslateX或者translateY的值为-100%

当然,或许在你的实战经验当中,你还有别的方案。对于其他的方案,我们不再罗列,咱们具体来看看各种隐藏DOM元素的差异。

隐藏DOM元素的差异性

上面简单的罗列了八种隐藏DOM元素的方式,其实给我们视觉上的效果,这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而,屏幕并不是唯一的输出机制,比如说,屏幕上看不见的元素(隐藏的元素),但其中一些隐藏元素的方式在屏幕阅读器中并没有隐藏,它依然能被屏幕阅读器读出来(因为屏幕阅读器依赖于可访问性树来阐述)。为了消除它们之间的歧意,我们将使用以下条款:

  • 完全隐藏:元素既不在屏幕上可见,而且也不暴露在可访问性树上
  • 语义上隐藏:元素在屏幕上呈现,但不暴露在可访问性树上
  • 视觉上隐藏:元素没有在屏幕上呈现,但是暴露在可访问性树上

如何完全隐藏元素

针对上面所列的隐藏元素方式当中,能完全隐藏元素的方法有三种:

  • 通过CSS设置元素的display属性值为none
  • 通过CSS设置元素的visibility属性值为hidden
  • 通过HTML5元素的属性值hidden(就是给元素声明一个hidden属性值),比如<div hidden>

虽然上面的几种方法得到的结果相同,即内容在屏幕上不可见,屏幕阅读器也无法读到(不在可访问性树上),但它们之间还是有所差别的。

给DOM元素设置display:none;来隐藏元素,将导致元素完全消失,而且不会占据任何的空间。如果通过visibility:hidden;隐藏元素,元素虽然消失了,但会占据空间(其占据的空间和元素的大小有直接关系)。

如何隐藏DOM元素的更多相关文章

  1. 点击空白处隐藏指定dom元素(纯javascript方法)

    <script type="text/javascript"> document.onclick = function (event) { event = event ...

  2. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  3. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  4. 一个DOM元素绑定多个事件时,先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  5. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  6. 如何在通过knockout数据绑定的DOM元素上添加事件

    通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...

  7. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  8. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  9. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

随机推荐

  1. 微信小程序-视图视图引用

    引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...

  2. jmeter+ant+jenkins+mac环境搭建

    一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.ANT环境:http://ant ...

  3. CSUOJ_1002

    /* * Title : A+B(III) * Data : 2016/11/09 * Author : Andrew */ #include <iostream> #include &l ...

  4. U盘修复

    方法一: 1.点开始-运行-输入cmd-format f: /fs: FAT32 (这里f:是指U盘所在盘符) 2.打开控制面板-管理工具-计算机管理-磁盘管理-找到U盘的所在的盘符--点右键--删除 ...

  5. JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  6. MemCache中的内存管理详解

    MC的内存管理机制 1.内存的碎片化 当我们使用C语言或者其他语言进行malloc(申请内存),free(释放内存)等类似的命令操作内存的时候, 在不断的申请和释放的过程中,形成了一些很小的内存片段, ...

  7. ADO.NET 使用通用数据库操作类Database (SQL Server)

    一.Web.config配置 <connectionStrings> <add name="constr_name" connectionString=" ...

  8. Centos 与本地终端 上传、下载 文件

    首先安装lrzsz # yum -y install lrzsz 1.上传文件,执行命令rz,会跳出文件选择窗口,选择好文件,点击确认即可. # rz 运行rz命令后弹出选择文件窗口,找到要上传的文件 ...

  9. 如何判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  10. 【WebGoat习题解析】AJAX Security->Insecure Client Storage

    绕过前端验证可以通过两种办法:一是利用开发者工具进行debug:二是利用burpsuite直接抓取.本题解决思路如下: STAGE 1: For this exercise, your mission ...