利用JS做到隐藏div和显示div

最新推荐文章于 2022-04-13 15:03:10 发布
最新推荐文章于 2022-04-13 15:03:10 发布
阅读量1.9k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： web端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44768635/article/details/89250087
本文介绍了使用JavaScript通过更改div元素的visibility和display属性来实现显示和隐藏效果的方法。visibility属性仅隐藏元素但保留其占位空间，而display属性则完全移除元素，释放其占用的空间。适用于网页布局调整和交互设计。

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

利用JS做到隐藏div和显示div
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="";//显示

转自:https://www.cnblogs.com/qingsong/p/5365218.html!
希望能对萌新有用,我也是萌新,共勉!!!

JS实现各种动态显示隐藏div效果
01-10
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
jQuery拖动div、移动div、弹出层实现原理及示例
10-26
3. 在mousemove事件中，利用之前记录的位置差值来动态更新div的top和left属性，实现拖动效果。 4. 在mouseup事件中停止拖动效果，防止div继续移动。 以上知识点涵盖了从基础的CSS样式设置到复杂的jQuery事件监听...
javascript怎么隐藏显示div
kakaluote1998的博客
04-13 2万+
设置方法：1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；2、使用style对象的visibility属性，值为“hidden”可隐藏div元素，值为“visible”可显示元素。 本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。 JS隐藏和显示div的方式有两种： 方式一：设置元素style对象中的display属性 1 2 3 var ...
JS实现点击一个按钮隐藏和显示div
喜欢做一些demo，和分享遇到的 BUG
10-03 1万+
简单JS基础入门时的demo
javascript 点击固定数据 隐藏或显示DIV
weixin_30767921的博客
08-12 137
今天宝贝要实现点击更多来实现隐藏或开启DIV，想想就用JS来实现吧。HTML：1<divonclick="divShowBatchName()">正常显示数据</div>23<divid="divBatchName"style="display:none">隐藏数据</div>JS:1functiondivShowB...
js div的显示和隐藏
dxm809的博客
03-18 259
&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type="text/css"&gt;        div    {        display:block;        }    &lt;/style&gt;    &lt;script type="text/javascript"&gt;     
深入解析Div模式窗口的实现与应用
标题和描述中提及的“div模式窗口”主要指利用HTML中的`<div>`元素来创建的一种对话框或窗口模式，这种模式常用于网页中进行弹出式信息展示、用户交互界面或者模态对话框。在现代的网页设计中，`<div>`模式窗口是一...
兼容IE6/IE7及火狐的DIV+select美化技术分享
- **HTML结构**：创建一个`<div>`容器，其中包含一个隐藏的`<select>`元素和用于显示的`<span>`或`<div>`元素。当用户与显示元素交互时，触发隐藏的`<select>`元素的下拉功能。 - **CSS样式**：编写CSS来美化这个`...
CSS控制二级菜单动态出现不只有js才能做到
12-13
总的来说，通过理解和利用CSS的选择器和伪类，我们可以创建一些基本的交互式元素，如二级菜单的动态显示。这不仅有助于减轻服务器端和客户端的JS负担，还能提高页面加载速度。然而，对于更复杂、更丰富的交互体验，...
js实现多div的显示和隐藏
07-03
js实现多div的显示和隐藏,可实现选项卡效果。详细说明：http://www.our-code.com/news/201073/n616722.html 源码在文章中也全。
js实现div层的显示与隐藏
10-17
使用js代码实现div层的显示与隐藏，主要是radio的属性。
js点击页面其它地方将某个显示的DIV隐藏
10-28
今天一朋友问我 点击一按钮弹出一个DIV，然后要求点击页面其它地方隐藏这个DIV
onclick事件实现div的隐藏和显示
03-01
博文链接：https://qsfwy.iteye.com/blog/219184
JS显示隐藏DIV(动画效果)
03-10
封装好的JS显示隐藏DIV(动画效果,递增显示,递减隐藏),很实用很炫的效果,已测试支持ie,firefox,safari,opera,谷歌浏览器.有bug和不足处欢迎指正,交流.
js点击按钮div显示隐藏
u010234868的专栏
06-12 8047
<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var
用js将div隐藏或显示
S_Q_A的博客
10-07 4464
一、隐藏且不占用页面空间 // 设置display属性 style="display: none;" document.getElementById("id").style.display="none"; //隐藏 document.getElementById("id").style.display=""; //显示 二、隐藏但仍占有页面空间，会显示空白 // 设置 visibility但是隐藏后页面显示空白 style="visibility: none;" document.getEleme
原生js设置div隐藏或者显示_js显示和隐藏div如何修改
weixin_30531997的博客
12-23 352
匿名用户1级2013-07-11 回答有三种方法实现，原声js两种，还有一种jquery的，其实只是写法不同。方法如下：显示内容点击显示/*原生的js写法*/functionshowdiv(){if(showdiv_display=document.getElementById('show').style.display=='none'){//如果show是隐藏的document.getEl...
JS隐藏/显示div标签
weixin_46260870的博客
08-08 970
代码如图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值