JS jQuery顯示隱藏div的幾種方法

JS隱藏和顯示div的方式有兩種：
方式1：隱藏後釋放佔用的頁面空間
通過設置display屬性可以使div隱藏後釋放佔用的頁面空間.
style=“display: none;”
document.getElementById(“demo”).style.display=“none”;//隱藏
document.getElementById(“demo”).style.display="";//顯示

方式2：隱藏後仍佔有頁面空間，顯示空白
div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白.
style=“visibility: none;”
document.getElementById(“demo”).style.visibility=“hidden”;//隱藏
document.getElementById(“demo”).style.visibility=“visible”;//顯示

注意：
使用第二方式更人性化，但是，用div.style.display="none"隱藏會引起，div裏面的東西休眠，裏面的事件就不響應了。

jQuery隱藏和顯示div的方式
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

4、$("#demo").toggle(//動態顯示和隱藏

     function () { 

          $(this).attr("style","display:none;");//隱藏div

     },

     function () {    

          $(this).attr("style","display:block;");//顯示div

     }

  );

   <div id="demo"></div>

注：

$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;

1和2中的display:none可以換成visibility:hidden，display:block可以換成visibility:visible.兩者的區別是前者隱藏後不佔空間，而後者隱藏後會佔空間
文章來源 ：https://blog.csdn.net/qq_36135335/article/details/82754202