js隐藏显示div页面方法

今天呢，给大家分享一下，通过js来隐藏显示

 

 首先，先上图

这是js代码

这是H5及css样式

效果图，由于用于测试，比较简陋，不要在意，哈哈哈哈！

给大家测试代码，有需要可以复制

    
        

            

                显示
                隐藏
            

            

                你好世界！
            

        

    

接下来我们聊聊两种不同的方法

第一种方法：

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

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

第二种办法：

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

document.getElementById('demo').style.display="block";//显示

两办法呢，你可以这样理解：

第一种呢，你隐藏，就像你拿一个布条将你不想看见的东西盖着，但是呢，它还是在那里，你想看见它了，你就把布条拿掉。

所以说第一种方法隐藏，虽说是你是看不见它了，但是它还是在那里，只是被盖着了，还是占用的你页面空间。

第二种呢，你隐藏，就像你把你不想看见的东西放到你的抽屉里，你想看见它，又把它从抽屉里拿出来，所以第二种方法，你隐藏了，它不会占用你的空间。但是呢，如果你想你隐藏的页面事件响应就不推荐你用第二种办法，如果它被隐藏，它里面的东西会休眠，里面的事件就不响应了，只有将它显示才会响应。

所以呢，要用哪个方法，要看你的需求，不同地方用不同方法

好了 ，就到这吧，有什么更好的方法，欢迎在下方评论，感谢观看