- 隐藏后释放占用的页面空间
// 设置display属性 style="display: none;" document.getElementById("id").style.display="none"; //隐藏 document.getElementById("id").style.display=""; //显示
style.display="none"隐藏会引起div里面的dom休眠，里面的事件就不响应了
- 隐藏后仍占有页面空间，显示空白
// 设置 visibility但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("id").style.visibility="hidden"; //隐藏 document.getElementById("id").style.visibility="visible"; //显示
jQuery隐藏和显示div的方式
$("#id").attr("style","display:none;"); //隐藏div $("#id").attr("style","visibility:hidden"); $("#id").attr("style","display:block;"); //显示div $("#id").attr("style","visibility:visible"); $("#id").css("display","none"); //隐藏div $("#id").css("display","block"); //显示div $("#id").hide(); //隐藏div 表示 display:block $("#id").show(); //显示div 表示 display:none //动态显示和隐藏 $("#demo").toggle( function () { $(this).attr("style","display:none;");//隐藏div }, function () { $(this).attr("style","display:block;");//显示div } );
