讨论visibility和display的区别与js如何控制

最新推荐文章于 2024-04-13 15:50:45 发布
最新推荐文章于 2024-04-13 15:50:45 发布
阅读量567 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WiteWater/article/details/83787011
版权

今天在做页面显示处理的时候，遇到老项目中控制隐藏和显示使用的是visibility:hidden;我通过使用jquery的show方法无法使该元素显示在页面上，然后在w3school上查了一下，发现不适用。

这才发现原来如此，问题出现在了visibility:hidden上面。

然后就百度了一下，visibility和display的区别。

百度百科这样写道：

这下全明白，因为习惯使用display而忽略了visibility。

在js中要控制元素显示和隐藏就需要设置document.getElementById('id').style.visibility='hidden' 隐藏 或者document.getElementById('id').style.visibility='visible' 显示。使用jquery的话，$("#id").css("visibility","visible");显示

$("#id").css("visibility","hidden"); 隐藏。

 

 

极客乐吧
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html判断display,display与show的区别
weixin_42121058的博客
06-15 4227
display和show的区别做显示的意思时,display show有什么区别吗，分别用在什么地方，display vt. 陈列, 展览, 显示 n. 陈列, 展览, 显示 显示,显示器 show n. 表示, 展览, 炫耀, 外观, 假装 v. 出示, 指示, 引导, 说明, 显示, 展出, 放映 show更口语化。exhibition, performance, show和display的区...
javascript-carousel
03-19
2. **隐藏与显示**：使用`display`或`visibility`属性控制不同图片的显示和隐藏，实现轮播效果。 3. **响应式设计**：使用媒体查询(`@media`)适应不同设备和屏幕尺寸，确保轮播图在各种环境下都能正常工作。 4. **...
angularjs中ng-show和css中display的区别
weipen721721的博客
07-06 3547
如果一开始在html页面设置的属性ng-show="false", 根据需要是否要动态显示改div在js文件中更改div属性$("#xxx").setAttribute("ng-show", "true")后, 在浏览器(chrome)调试页面看到div的ng-show="true",但是，有个ng-hide:not的class下有属性display: none !important， 从而
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-13 2755
简单的说，当用户最小化网页或移动到另一个标签时，API会发送 visibilitychange 有关该网页的可见性的事件。以前看到过一些网页，在标签切换到其它地址时，网页上的标题上会发生变化，一直不知道这个是怎么做的，最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定，这里将介绍一下页面可见性（Page Visibility）API的简单应用。hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
js显示隐藏 display visibility以及jquery里的show hide的区别
m0_62360527的博客
05-31 1363
js显示隐藏 display visibility以及jquery里的show hide的区别
javascript中 visibility和display的区别
五月天的博客
03-28 156
  visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，...
Javascript中visibility和display的用法
Royi的博客
07-17 869
用法：两者都是控制页面元素显示和隐藏的方法 visibility： hidden //隐藏 visible //显示 display： none //隐藏 block //显示 区别： visibility只是整块区域的内容不显示，区域仍然存在，高度无法调节； display是整块区域不显示。
js原生态tab新闻列表切换选项卡代码下载.zip
07-05
4. **CSS样式控制**：为了实现视觉上的切换效果，JavaScript可能修改元素的CSS属性，如display或visibility，来控制内容的显示和隐藏。 5. **变量和数据结构**：可能使用变量来存储当前选中选项卡的信息，或者使用...
js切换切换
03-14
在JavaScript（JS）编程中，"切换切换"通常指的是元素状态或显示内容的动态变化，例如切换按钮状态、显示隐藏的元素或者轮播图效果。在这个场景中，我们可能涉及DOM操作、事件处理以及CSS样式控制等多个方面。下面将...
JavaScript 第三章 DOM编程基础 使用document对象
03-24
在实际应用中，例如“简单树形菜单素材”，可能涉及到使用JavaScript动态创建和控制DOM元素，通过点击事件改变元素的`display`或`visibility`属性来实现菜单的展开和折叠效果。 复习框全选效果素材可能涉及`...
气球
02-10
本话题将深入探讨如何利用JavaScript技术和相关的库来创建和控制“气球”效果。 【正文】： 1. **基本HTML与CSS构建** 在创建气球效果前，我们首先需要在HTML中定义一个容器元素，比如`<div>`，并使用CSS来设置其...
用js实现控件的隐藏及style.visibility的使用
12-01
代码如下: <!DOCTYPE html> <html> <body> <p id=”p1″>这是一段文本。</p> <input type=”button” value=”隐藏文本” onclick=”document.getElementById(‘p1’).style.visibility=’hidden'” /> <input type=”button” value=”显示文本” onclick=”document.getElementById(‘p1’).style.visibility=’visible'” /> </body> </html>
CSS Display(显示) 与 Visibility（可见性）
12-13
.imgbox { float:left; text-align:center; width:120px; height:135px; border:1px solid gray; margin:4px; padding:0px; } .thumbnail { width:110px; height:90px; margin:3px; } .box { width:110px; padding:0px; } CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 Box 1 Box
javascript visibility和display使用区别
ArthurCaoMH的博客
03-09 266
visibility要占用域的空间，而display则不占用。 visibility和display都可以实现对页的隐藏，例如： 将元素display属性设为 block，会在该元素后换行。 将元素display属性设为 inline，会消除元素换行。 将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。 将元素visibility属性设为 hidden，隐藏该元素...
JavaScript控制元素（标签）的显示与隐藏
热门推荐
cnds123的专栏
12-24 1万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
深入理解js中的display:none和visibility属性
jiangtao7913的博客
12-22 8972
1.用javascript隐藏控件的方式有两种：分别设置控件的style的“display”属性和“visibility”属性。当style.display="block"或者style.visibility="visible"时，控件是可见的。当style.display="none"或者style.visibility="hidden"时控件是不可见的。这两者的区别是：“display”不但隐
js基础--如何判断浏览器标签页是隐藏或者显示状态
积少成多
03-27 4654
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求，当浏览器切换到别的标签页或着最小化时，我们需要暂停页面上正在播放的视频或者音乐，这个需求就会用到我下面要说的这个知识点： document.visibilityState document.hidden visibilitychange 具体用法 浏览器标签页隐藏...
JS中style.display和style.visibility的区别
交换一个思想，能得到俩思想
01-10 8346
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不
visibility和display的区别
03-16
visibility和display都是CSS属性，但它们的作用不同。 visibility属性控制元素是否可见，但元素的空间仍然被保留。如果设置为visible，则元素可见；如果设置为hidden，则元素不可见，但仍然占据空间。如果设置为collapse，则元素在表格中被折叠。 display属性控制元素的显示方式。它可以将元素设置为block、inline、inline-block、table等不同的显示方式。如果设置为none，则元素不可见，也不占据空间。 因此，visibility和display的区别在于，visibility只控制元素是否可见，而display控制元素的显示方式和是否可见。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值