js隐藏显示div页面方法
今天呢，给大家分享一下，通过js来隐藏显示
首先，先上图
这是js代码
这是H5及css样式
效果图，由于用于测试，比较简陋，不要在意，哈哈哈哈！
给大家测试代码，有需要可以复制
<script>
function set(){
//第一种，隐藏页面，隐藏后还是占有页面空间，显示空白
document.getElementById('demo').style.visibility="hidden";//隐藏
//还有一种办法，隐藏后释放占用的页面空间
// document.getElementById('demo').style.display="none";//隐藏
}
function get(){
//第一种办法
document.getElementById('demo').style.visibility="visible";//显示
//第二种办法
// document.getElementById('demo').style.display="block";
}
</script>
<body>
<div class="Main">
<div class="first">
<button οnclick="get()">显示</button>
<button οnclick="set()">隐藏</button>
</div>
<div id="demo" class="second">
你好世界！
</div>
</div>
</body>
接下来我们聊聊两种不同的方法
第一种方法：
document.getElementById('demo').style.visibility="hidden";//隐藏
document.getElementById('demo').style.visibility="visible";//显示
第二种办法：
document.getElementById('demo').style.display="none";//隐藏
document.getElementById('demo').style.display="block";//显示
两办法呢，你可以这样理解：
第一种呢，你隐藏，就像你拿一个布条将你不想看见的东西盖着，但是呢，它还是在那里，你想看见它了，你就把布条拿掉。
所以说第一种方法隐藏，虽说是你是看不见它了，但是它还是在那里，只是被盖着了，还是占用的你页面空间。
第二种呢，你隐藏，就像你把你不想看见的东西放到你的抽屉里，你想看见它，又把它从抽屉里拿出来，所以第二种方法，你隐藏了，它不会占用你的空间。但是呢，如果你想你隐藏的页面事件响应就不推荐你用第二种办法，如果它被隐藏，它里面的东西会休眠，里面的事件就不响应了，只有将它显示才会响应。
所以呢，要用哪个方法，要看你的需求，不同地方用不同方法
好了 ，就到这吧，有什么更好的方法，欢迎在下方评论，感谢观看
js隐藏显示div页面方法相关推荐
- JS隐藏/显示div标签
代码如图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- javascript怎么隐藏显示div
设置方法:1.使用style对象的display属性,值为"none"可隐藏div元素,值为"block"可显示元素:2.使用style对象的visibilit ...
- jQuery的隐藏显示hide(),show()方法
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果,现在在jquery中有了hide();我们可以利用hide()方法来操作,希望本文章给大家所有帮助. ...
- 优酷海外用户自动显示简体页面方法
由于本人有强迫症,在海外使用优酷老是给我显示繁体界面,看着很难受,简单研究了一下 先拉到页面最下方,看到切换简体/繁体的按钮右键Inspect Event Listeners 里展开Click事件,点 ...
- 一些简单的js技术 实现点击 的js隐藏显示
首先 这是一个js的方法 然后 获取模块的属性 根据模块的属性 设置隐藏和显示 function showoopenordown(){ var oDiv=document.getElementByI ...
- css隐藏/显示文字的方法
最近做了一个demo,写了一个图片轮播,在图片轮播的时候显示对图片的文字解释,要求文字不跟随图片滚动默认显示.花了一点点时间,解决了这个办法,最后总结了一下在html中用css隐藏文字的方法. (1) ...
- 关于Vue页面JS+JQ无法调用页面方法与data
一. 在使用vue开发的过程中难免要整合第三方js或者jq. 但是整合后的js与jq无法使用vue页面里面的方法与data. 时常发生明明在同一个vue页面里面却无法调用到方法属性. 其实这是你的调用 ...
- Mac中IDEA的工具栏隐藏显示的解决方法
今天是就职的第二天,上班第一天公司就给每位实习生配备了Apple跟戴尔显示屏.啊这,说实话,内心是很激动的,因为从来没有使用过苹果电脑,但相应而来的却是一系列不适应问题-很多开发软件都需要自己重新下载 ...
- Js 中文显示星期几方法
<script>//定义一个中文数组var arr= new Array("星期日","星期一","星期二","星期三 ...
最新文章
- 在vi里面实现字符串的批量替换
- python的xlutils模块_xlutils模块使用
- 【转载】单片机应用系统断电时的数据保护方法
- MYSQL-主键、外键
- struts学习笔记（一）：Struts相关基础理论介绍
- 考勤排班_考勤管理系统VS传统考勤排班优劣如何？
- JS操作JSON数据交换
- 带标签的 break 和 continue (Java)
- mysql 取首字母_MySQL中获取拼音首字母的方法
- 2007版的office软件下载及简介
- 2022年固定资产管理系统的概况
- 输入一个仅含十二进制数的字符串输出二进制
- 第二章、Zigbee模块参数（DRF1609H、DRF2657C）
- 怎样配置更完美的图形工作站
- c++打印心形_c语言如何打印心
- 前后落差大用什么词语_形容前后反差大的词语
- 多项式插值与牛顿差商
- PPP中的pap和chap认证
- 实录：余凯、颜水成、梅涛、张兆翔、山世光同台讨论 “深度学习的能与不能”
- 制作一个手机APP软件需要拥有哪些资质证明？