DOM属性display与visiblity区别

最新推荐文章于 2023-05-01 14:54:43 发布
最新推荐文章于 2023-05-01 14:54:43 发布
阅读量128 收藏
点赞数
分类专栏： css 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46814663/article/details/130455936
版权

前言：在日常的开发过程中，我们可能会需要动态的显示或隐藏DOM元素，这就需要结合实际开发需求来选择合适的方式实现功能需求。接下来，简单介绍一下DOM属性display和visiblity之间的区别，方便选择适合的方式。

属性displayvisiblity
显示visible
不显示nonehidden
DOM结构不会渲染该元素在页面中，也根本不会占据位置会渲染该元素在页面中，但是被隐藏，也就是说依旧占据位置
性能通过js无法获取到该元素身上的一些属性，并且通过动态的改变的display属性，会让页面反复渲染，引起页面重排，性能较差动态的改变的visibility属性，不会让页面反复渲染该元素，发生的是重绘，性能较好

Dajrin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...
DOM元素display、visibility、opacity三种隐藏方式的对比
Liang_Shun的博客
04-23 1002
方式一、display： none DOM结构：浏览器不会渲染display属性为none的元素，不占用空间； 事件监听：无法进行DOM事件监听，毕竟没有被渲染出来； 性能：动态改变此属性会引起重排，性能较差； 继承：不会被子元素继承，毕竟子元素也不会被渲染出来 transition（过渡）：不支持display。 方式二、visibility： hidden DOM结构：元素被隐藏，但会被...
【学习笔记41】DOM操作的练习
yizhiyang
11-27 658
DOM操作的练习
JS通过display属性实现DOM元素动态显示和隐藏
m0_46814663的博客
05-01 1900
如果在开发过程中不适合使用display属性实现动态显示或隐藏的需求，可以看一下下面这篇文章，采用visiblity属性实现。前言：因为笔者在开发过程中涉及到表格内容需要根据不同显示不同的内容，部分。（实际上不能称为隐藏，页面根本不渲染该DOM元素），且不占用原来的空间，因此使用。属性来实现需求功能。
Web APls 阶段——第十一节（1）——节点操作，时间对象，重绘和回流
123加油的博客
04-25 257
文章目录目标：1. 节点操作1.1 DOM 节点1.1.1 节点类型：1.1.2 节点层级1.2 查找节点1.2.1 父节点查找案例：关闭二维码案例案例：关闭多个二维码案例1.2.2 子节点查找1.2.2 案例：新浪下拉菜单1.2.3 兄弟关系查找1.3 增加节点1.3.1 创建节点1.3.2 追加节点1.3.3 案例：学成在线案例渲染1.3.4 克隆节点1.4 删除节点2. 时间对象2.1 实例化2.2 时间对象方法2.3 案例：页面显示时间2.4 时间戳2.5 案例：毕业倒计时效果3 .重绘
JS DOM操作无法获取display属性问题（获取非行内样式问题及解决办法）
qq_38981275的博客
06-09 2890
先把代码贴出来吧： 下面是初始化效果：
DOM操作一些常用的属性汇总
12-09
【DOM操作常用属性详解】 DOM（Document Object Model）是HTML和XML文档的一种标准表示形式，它将文档解析成一个可编程的节点树，允许开发者通过JavaScript等脚本语言对文档内容进行读取、修改和操控。DOM的核心...
遍历DOM对象内的元素属性示例代码
09-04
当需要遍历DOM对象内的元素属性时，通常是为了获取或修改元素的各种特性。这个过程可以通过JavaScript来实现，特别是当我们需要获取特定ID的元素并检查其所有属性时。以下将详细介绍如何遍历DOM对象内的元素属性，并...
JS中DOM元素的attribute与property属性示例详解
01-19
property 是 dom 元素在 js 中作为对象拥有的属性。 从定义上可以看出: 对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的 但是对于自定义的属性来说，他们是不同步的.(自定义属性不会...
JavaScript变量Dom对象的所有属性
10-15
DOM对象允许我们通过JavaScript与网页内容交互，包括元素、属性、文本等。在JavaScript中，我们可以创建、访问和修改DOM对象的属性，以实现动态更新网页的效果。 在标题和描述中提到的“JavaScript变量Dom对象的...
jQuery-判断dom元素是否可见:visible或 ：hidden
LzzMandy的博客
08-08 3022
<div id="item1"></div> 判断item1是否可见的方法： if($("#item1").is(":visible")){ //可见 //执行可见的操作 ...... } 或者 if($("#item1").is(":hidden")){ //不可见 //执行不可见的操作 ...... } ...
如何显示/隐藏一个DOM元素？有几种方法？每种方法的区别？
limeng886549的博客
08-16 6447
1.style属性的display 被隐藏的控件不再占用显示时占用的位置： this.getElementByXid(‘domXid’).style.display=”none” this.getElementByXid(‘domXid’).style.display=”block” 2.visibility隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置： this.getEleme...
怎样判断DOM 元素是否显示与隐藏
程序员写的技术 FAQ 和杂文
06-11 5634
if($("#id_1").is(':visible') == true) { console.log('show'); }else{ console.log('hide'); }
监视DOM 是否可见 ,并触发相应事件
隶属感的博客
09-04 1824
很多出插件在容器不可见时,获取不到宽高,导致异常,---------多件于多个选项卡存在的情况 如何是好 ============&gt;监测 属性变化  就像  onchange 哪样  ========&gt;但是 由于各个浏览器之间对 onproperchange 类型的函数,完善的不理想 ,所以真心没什么办法,Ie的确有这方面的函数 onproperchange   但是我用的就是...
检查元素在DOM中是否可见
w36680130的博客
06-14 1625
Is there any way that I can check if an element is visible in pure JS (no jQuery) ? 有什么方法可以检查元素在纯JS
控制dom元素隐藏和显示的几种做法
boss2967的博客
02-27 1万+
控制dom元素隐藏和显示的几种做法1.style属性的display 被隐藏的控件不再占用显示时占用的位置this.getElementByXid(‘domXid’).style.display=”none”;this.getElementByXid(‘domXid’).style.display=”block”;2.“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的...
html的display属性
热门推荐
万物皆可互联，一切均可编程
09-10 2万+
block标签(比如div) 默认独占一行显示，撑满一行，高度为0 支持所有css命令 设置了宽度后，后面剩余的宽度还是会占一行，只是不显示 属性display可以改变标签的标签的属性 inline（内嵌）标签（比如span） 不占一行显示，后面可以继续跟同类型标签 内容撑开宽度 不支持宽高 不支持上下的margin和padding 代码换行被解析 属性display可以改变标签的标签的属性...
HTML DOM display 属性
wxlkeepmoving的专栏
11-27 692
定义和用法<br />display 属性设置元素如何显示。语法：Object.style.display=valuePossible Values值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compact此元素会根据上下文作为块级元素或内联元素显示。markertable此元素会作为块级表格来显示（类
display 与 visibility 的区别（隐藏Dom元素）
chenqingmiaomiao的专栏
12-23 2103
display 与 visibility display与visibility都是用来隐藏Dom元素用的，他们的显示效果几乎没有差别,但是他们还是存在一些不同的地方,我们来看看他们之间的一些异同 同: (1)他们都能隐藏元素;document.getElementById("id").style.display = "none"; 或者.style.visibility = "hidden"
使用jquery获取dom的display属性值
最新发布
06-09
可以使用jQuery的`css()`方法来获取DOM元素的display属性值，示例如下： ```javascript var displayValue = $('#myElement').css('display'); ``` 其中，`#myElement`是待获取display属性值的DOM元素的选择器。`css('display')`返回该元素的display属性值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值