[HTML]显示/隐藏DIV的技巧(visibility与display的差别)

最新推荐文章于 2024-06-24 21:00:18 发布
最新推荐文章于 2024-06-24 21:00:18 发布
阅读量10w+ 收藏 39
点赞数 16
分类专栏： 网页专区 JavaScript专区 文章标签： div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szwangdf/article/details/1548807
版权

     div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

 

　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显

逐浪_一生悬命
关注
  • 16
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
HTML元素的隐藏四种方法
coderlhj666的博客
05-18 1万+
HTML元素的隐藏四种方法 一、方法一：display设置为none 元素不显示，也不占据任何位置，不占据任何空间（和不存在一样） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
js div弹出框 显示与隐藏
12-23
js点击文本输入框显示DIV,操作后点击其他地方将DIV框隐藏
HTML#9
最新发布
weixin_64991351的博客
06-24 981
过渡(transition)是cSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果,要过渡的属性 花费时间 运动曲线 何时开始:如果有多组属性变化，还是用逗号隔开。参数可以使数字(1、2、3)、关键字(odd（奇数），even（偶数）)、公式(2n、2n+3 :使用公式时,n从0开始)，参数的索引起始值时1，而不是0。:nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素(从后往前数)。
div 隐藏和显示
flyer222的专栏
04-23 4471
标题：关于div的隐藏出处：沧海一粟时间：Wed, 27 Sep 2006 10:53:45 +0000作者：jed地址：http://jed.dzhope.com/read.php/83.htm内容：div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白style="visibility: none;"document.getElementById("typediv1")
html中怎么让一个div显示或隐藏,怎么让一个div显示一个div隐藏?
weixin_32998893的博客
06-03 2527
让一个div显示一个div隐藏的方法如下(代码的规格写法只能这样)：1、HTML代码如下：menu0menu1menu2menu3menu4menu5menu6menu7d0d1d2d3d4d5d6d72、CSS代码：.point{float: left;list-style: none;}.point li{margin-bottom: 10px;}.box{float: right;margi...
Javascript显示隐藏DIV
吖权
06-06 7898
1.创建一个showhidediv的方法，直接跟ID属性调用； &lt;script language="javascript"&gt; function showhidediv(id){ var sbtitle=document.getElementById(id); if(sbtitle){ if(sbtitle.style.display=='block'){ sbtitl...
前端设置div的显示与隐藏
weixin_43041350的博客
01-09 3990
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白。通过设置display属性可以使div隐藏后释放占用的页面空间。
通过display或visibility来实现HTML元素的显示与隐藏
09-28
在HTML中控制元素的显示与隐藏是前端开发中的常见需求，主要可以通过CSS属性display和visibility来实现。两者都允许开发者根据特定条件（比如用户的交互行为、数据的变化等）来控制页面上元素的可见性。 首先，...
javascript 控制 html元素 显示/隐藏实现代码
10-29
总结来说，JavaScript提供了强大的能力来控制HTML元素的显示状态，可以使用display属性和visibility属性来达到不同的显示/隐藏效果。开发者可以根据需要选择合适的方法来实现元素的隐藏和显示，从而提供更加动态的...
通过display或visibility来隐藏html元素
09-28
在Web开发中，控制HTML元素的显示和隐藏是一个常见的...以上是关于display和visibility属性在隐藏HTML元素时的区别和使用方法。在实际开发中，开发者可以根据具体需求选择合适的属性进行操作，以达到预期的页面效果。
js实现div层的显示与隐藏
10-17
使用js代码实现div层的显示与隐藏，主要是radio的属性。
JS和jQuery显示隐藏div的方法
INNER_PEACE_DS的博客
03-06 632
js显示隐藏div
用js控制div的显示与隐藏
weixin_33807284的博客
02-19 189
功能介绍：要实现一个div的显示与隐藏，方法有很多，这里记录下一个简单的js效果，用js来控制div的显示与隐藏，示例代码如下： <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex...
div设置隐藏和显示
pyd1040201698的博客
11-05 294
隐藏 $("#demo").attr("style","display:none;"); 显示 $("#demo").attr("style","display:block;");
15点击按钮，设置div显示和隐藏div
dinggu6579的博客
08-28 381
<input type="button" value="设置div隐藏" id="btn18" /> <input type="button" value="设置div显示" id="btn19" /> <div id="dv" style="width: 200px;height: 200px;background-...
div 隐藏和显示方式
热门推荐
随心更博
07-08 1万+
在js中可以使用两种方式控制div的显示和隐藏，都能够实现显示和隐藏，但是又有所不同； 一.方式1：隐藏后仍占有页面空间，显示空白     div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白     style="visibility: none;"      //在Div中设置style属性     document.getElementById(
div的显示和隐藏
06-28 2190
比较简单实现.style.display控制层隐藏或显示属性. function show(){ document.getElementById("div").style.display=""; //alert(document.getElementById("div").style.display) } function hidden(){ document.ge
前端：实现div的隐藏与显示
weixin_46001736的博客
11-30 1120
前端：实现div的隐藏与显示
display:none和和visibility:hidden的差别比较与演示代码的差别比较与演示代
09-09
display:none和visibility:hidden都是控制元素不显示的属性。它们之间的主要差别是显示方式的不同。 display:none会将元素从页面流中完全删除，即使元素占据了一定的空间，但它不会在页面上展示任何内容。相当于元素不存在。 visibility:hidden则是将元素隐藏起来，但仍然占据空间。换句话说，元素仍然存在于页面流中，只是不可见。 由于display:none从页面中删除元素，所以隐藏和显示这个元素都需要重新渲染整个页面，这会导致页面的重新布局和重新绘制，可能会产生额外的开销。而visibility:hidden只是将元素隐藏，所以在显示和隐藏时不需要重新渲染页面，性能上相对会更好一些。 下面是一个简单的演示代码来比较两者的差别： <html> <head> <style> #element1 { display: none; } #element2 { visibility: hidden; } </style> </head> <body> <h1>display:none与visibility:hidden的比较</h1> <div id="element1">我是display:none，隐藏的内容</div> <div id="element2">我是visibility:hidden，隐藏的内容</div> <button onclick="toggleDisplay()">切换显示和隐藏（display:none）</button> <button onclick="toggleVisibility()">切换显示和隐藏（visibility:hidden）</button> <script> function toggleDisplay() { var element = document.getElementById("element1"); element.style.display = element.style.display === "none" ? "block" : "none"; } function toggleVisibility() { var element = document.getElementById("element2"); element.style.visibility = element.style.visibility === "hidden" ? "visible" : "hidden"; } </script> </body> </html> 点击按钮会切换两个元素的显示和隐藏，观察页面的变化可以更好地理解display:none和visibility:hidden的差别。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值