如何显示/隐藏一个DOM元素？有几种方法？每种方法的区别？

最新推荐文章于 2024-07-22 09:52:48 发布
最新推荐文章于 2024-07-22 09:52:48 发布
阅读量6.6k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/limeng886549/article/details/99684278
本文详细介绍了五种常见的控件显示隐藏方法，包括使用style属性的display和visibility，利用jQuery的hide和show方法，以及通过Knockout(KO)的bind-visible和bind-if绑定来实现控件的动态显示和隐藏。每种方法的特点和适用场景都有具体说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.style属性的display 被隐藏的控件不再占用显示时占用的位置：
this.getElementByXid(‘domXid’).style.display=”none”
this.getElementByXid(‘domXid’).style.display=”block”

2.visibility隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置：
this.getElementByXid(‘domXid’).style.visibility=”hidden”
this.getElementByXid(‘domXid’).style.visibility=”visible”

3.通过jquery 进行控制显示隐藏：
$(this.getElementByXid(‘domXid’)).hide()
$(this.getElementByXid(‘domXid’)).show()

4.通过bind-visible 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点实际还在
详情连接：http://doc.wex5.com/data-bind-visible/

5.通过bind-if 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点已经不存在了，用法和bind-visible是一样的

需要注意的是：bind-if 控制的是当前dom节点下的子节点的存在与否（不包含当前节点），而bind-visible 是控制当前节点下的所有元素的隐藏的（包含当前节点）

隐藏DOM元素的几种CSS方法
TechGlide的博客
09-28 419
在Web开发中，经常需要根据特定条件隐藏或显示DOM元素。需要注意的是，这种方法适用于使用绝对定位的元素，如果元素是相对定位或固定定位，应根据具体情况调整样式。以上是几种常见的CSS方法来隐藏DOM元素。根据具体需求选择合适的方法。属性已经被废弃，不建议在新项目中使用。推荐使用更现代的方法来隐藏元素。可以裁剪元素的可见部分。根据实际需求选择适合的方法来隐藏DOM元素。是最常用的隐藏元素的方法，它会完全从页面中移除该元素。可以隐藏元素但仍占据布局空间。可以将元素移出可见区域，而。
使一个dom不可见的几种方法——隐藏元素
wuxian_wj的博客
01-20 4119
隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。 隐藏元素的方法 display: none visibility: hidden opacity: 0 <div hidden></div> position: absolute; top: -9999px; left: -9999px; clip-path: polygon(0 0, 0 0, 0 0, 0 0) width: 0; h
如何隐藏DOM元素
weixin_30319097的博客
09-27 411
在CSS中，要隐藏DOM元素常见的方法有： 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为absolute，并且将其移到不可见区域 设置元素clip（在新的CSS中使用clip-path来替代clip） 除此之外，还可以使用： 设置元素的hidden 上面隐藏元素的...
如何隐藏一个dom元素
LuckXinXin的博客
11-27 1675
css中隐藏DOM元素常见的5种方法 opacity:0 //将透明度设置为0，透明度为0的元素任然占据页面空间，响应用户交互 visibility:hidden //将元素隐藏，被隐藏的元素任然占据页面空间，不响应用户交互 diaplay:none //被隐藏的元素不在占据页面空间，不响应用户交互，相当于该元素不存在 position:absolute ...
原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
公众号：前端蛋卷
07-22 622
设置区块元素中文本行前面空格（缩进）的长度, 因此如果我们想要隐藏的元素是文本内容的时候，我们就可以使用这个属性将文本缩进到视口范围之外，从而达到隐藏的效果。通过上面的介绍，相信大家对隐藏元素有了更多的了解和认识了，以后在面对不同的需求时，就可以使用上述不同的方法去匹配相应的需求，从而达到事倍功半的效果。的场景不多，这个属性主要的功能就是将元素剪裁成显示区域为一个 1px * 1px 的矩形，这样就在视觉上实现了隐藏元素的效果。属性也是同样的类似的实现原理，通过调整元素的透明度来实现元素 “隐身”的效果。
jQuery控制TR显示隐藏的几种方法
10-25
在网页开发中，jQuery是一个非常常用的JavaScript库，它极大地简化了DOM操作，包括对表格（Table）中的行（TR）进行显示和隐藏的控制。在本文中，我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。 首先，最...
Html 元素隐藏的几种方式
09-28
在文档中提及的几种隐藏元素的方法中，主要涉及了CSS中的display属性以及JavaScript的DOM操作，下面将详细介绍这些方法。 首先，CSS中的display属性是控制元素可见性的常用工具，它能够控制元素是否显示以及其布局...
CSS隐藏页面元素的5种方法
09-24
CSS隐藏页面元素是网页设计中常见的需求，有多种方法可以实现这一目的，每种方法都有其独特的特性和适用场景。本文将详细介绍CSS隐藏元素的五种方法：opacity、visibility、display、position以及clip-path。 首先...
js判断元素是否隐藏的方法
10-25
本文将详细介绍几种常见的JavaScript方法来判断元素是否处于隐藏状态，并对每种方法的适用场景进行分析。 #### 1. 使用原生JavaScript ##### 1.1 `style.display` 属性 通过直接读取元素的 `style.display` 属性...
jquery判断元素是否隐藏的多种方法
10-25
本文将详细介绍几种不同的方法来检查一个DOM元素在页面上是否处于隐藏状态。 首先，我们可以使用CSS属性`display`来判断。通过获取元素的`display`样式属性，并与字符串`none`进行比较，可以确定元素是否被隐藏。...
JQuery采用CSS实现DOM元素的显示和隐藏
Discovery的专栏
10-03 6420
今天参加了一个Code Review看了一个同事的写的代码，感觉满足了当前的功能实现，但是从长远来看，无论从代码复用角度还是维护上看都显得非常差。采用CSS实现DOM元素是一种比较合理高效的做法。
Dom——显示隐藏
zx2014567296的博客
06-11 1153
显示隐藏 知识点 操作元素 （一）、改变元素内容 element.innerText：修改从起始位置到终点位置的内容，但去除html标签 element.innerHTML：修改从起始位置到终点位置的全部内容，包括html标签 ※不同点： innerText不识别html标签，innerHTML识别html标签，推荐使用后者 innerText去除空格和换行，innerHTML保留空格和换行 （二）、改变元素属性 如：img.src （三）、表单元素的属性操作 获取元素 注册事件、处理程序。 ①
隐藏DOM元素方法
xufeiayang的博客
11-28 837
http://www.w3cplus.com/css/hidden-dom-element.html
从零开始学jQuery(4)--显示和隐藏DOM节点&&操作DOM节点
azraelxuemo的博客
06-13 1150
要隐藏一个DOM，我们可以设置CSS的display属性为none，利用css()方法就可以实现 不过，要显示这个DOM就需要恢复原有的display属性，这就得先记下来原有的display属性到底是block还是inline还是别的值 考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法，我们不用关心它是如何修改display属性的，总之它能正常工作 <!DOCTYPE html> <html> <head> <meta ch
隐藏元素的八种方法
小红帽的博客
06-02 4427
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3属性，设置0可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变得不可见，并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为缩放
JavaScript实现页面元素显示/隐藏的功能
xbl1986的专栏
12-06 6981
参考：http://www.w3school.com.cn 不知道HTML5+CSS3能不能完成，还没有研究过。网上参考到的是用JS来实现的。主要是JS获取事件，改变属性，印象显示/隐藏的发生。 JS比较高层的使用如下： HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
隐藏元素的三种方式
jxl03280825的博客
10-10 1600
方法1： display:none .hide{ display: none; } 设置元素的display属性为none；不占用页面空间，其占有的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。 方法2： visibility:hidden .hide{ visibility: hidden; } 设置元素的visibility属性为visibility:hidden;元素会占用页面空间，因此只会导致浏览器的重...
JS通过display属性实现DOM元素动态显示和隐藏
m0_46814663的博客
05-01 2235
如果在开发过程中不适合使用display属性实现动态显示或隐藏的需求，可以看一下下面这篇文章，采用visiblity属性实现。前言：因为笔者在开发过程中涉及到表格内容需要根据不同显示不同的内容，部分。（实际上不能称为隐藏，页面根本不渲染该DOM元素），且不占用原来的空间，因此使用。属性来实现需求功能。
js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示
Ctrl_kun的博客
10-29 4411
js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示 问题： 在HTML标签中添加hidden=‘hidden’与disabled=‘disabled’可以实现隐藏标签与禁用标签的功能，但是如何动态去改变这些状态呢？ 思路： 通过js修改DOM的属性或者style来实现 方案： css或属性 visibility|display //用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”
说出几种vue的内置指令及基础用法？（三种即可）
最新发布
09-28
Vue.js 的内置指令可以帮助开发者更方便地操作DOM元素，以下是其中几种常见的内置指令及其基础用法： 1. `v-if` 和 `v-else`：用于条件渲染元素。例如： ```html <div v-if="isVisible">这是可见的</div> <div v-else>这是隐藏的</div> ``` 当 `isVisible` 为真时，第一个 div 将显示，否则第二个 div 显示。 2. `v-for`：用于循环渲染列表。比如遍历一个数组： ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> ``` 这将创建一个列表项，每个都对应数组中的一个元素。 3. `v-model`：双向数据绑定，用于连接表单元素和Vue实例的数据属性。如： ```html <input type="text" v-model="message"> ``` 输入框的内容会实时更新 `message` 变量的值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值