今天呢，给大家分享一下，通过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";//显示
两办法呢，你可以这样理解：
第一种呢，你隐藏，就像你拿一个布条将你不想看见的东西盖着，但是呢，它还是在那里，你想看见它了，你就把布条拿掉。
所以说第一种方法隐藏，虽说是你是看不见它了，但是它还是在那里，只是被盖着了，还是占用的你页面空间。
第二种呢，你隐藏，就像你把你不想看见的东西放到你的抽屉里，你想看见它，又把它从抽屉里拿出来，所以第二种方法，你隐藏了，它不会占用你的空间。但是呢，如果你想你隐藏的页面事件响应就不推荐你用第二种办法，如果它被隐藏，它里面的东西会休眠，里面的事件就不响应了，只有将它显示才会响应。
所以呢，要用哪个方法，要看你的需求，不同地方用不同方法
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
