原生DIV，控制两个DIV显示隐藏切换，且切换后样式形状不乱

小灰灰 2021-09-29 23:52 312阅读 0赞

## 原生DIV，控制两个DIV显示隐藏切换，且切换后样式形状不乱 ##

功能：做项目时候经常需要设置两个DIV显示或者隐藏，切换显示，并且保证之前设置的样式不乱：

实现：

保证样式不乱的方法是：先进行有关数据渲染的操作，最后再执行隐藏和显示的操作，这样数据已经填充好了，样式就不会乱了。

![在这里插入图片描述][20190719104008425.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190719104034657.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]  
一.方式1：隐藏后仍占有页面空间，显示空白  
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白

style="visibility: none;"
    document.getElementById("typediv1").style.visibility="hidden";//隐藏
    document.getElementById("typediv1").style.visibility="visible";//显示

二.方式2：隐藏后释放占用的页面空间，不占空间，没有空白  
通过设置display属性可以使div隐藏后释放占用的页面空间，如下

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

Jquery方式

1、$("#demo").attr("style","display:none;");//隐藏div
    
    $("#demo").attr("style","display:block;");//显示div
    
    2、$("#demo").css("display","none");//隐藏div
    
    $("#demo").css("display","block");//显示div
    
    3、$("#demo").hide();//隐藏div
    
    $("#demo").show();//显示div
    ---------------------

[20190719104008425.png]: /images/20210724/0dce5020102a48618f467453ee0af2f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/6ff3b3918114419bb16e0ec0ec46ed28.png
[20190719104034657.png]: /images/20210724/af69eb46719c4b79b00cbdf4a2317e28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/39a4713725f24bf7a917a9b34c308200.png