javascript实现显示和隐藏div方法汇总

javascript实现显示和隐藏div方法汇总

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>15种方法实现div显示和隐藏</title><script src="js/base.js"></script><style>body{ margin: 0;}h1,h2{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}button{ background-color: #333; color: white; padding: 5px; border: none; border-radius: 10px;}.box{ width: 1000px; padding: 50px; border: 5px solid #333; margin: 100px auto 0; overflow: hidden;}.tit{ text-align: center; margin-bottom: 20px;}.in-con{ padding-top: 10px; overflow: hidden;}.in{ width: 188px; height: 188px; padding: 5px; border: 1px solid #333; float: left; overflow: hidden;}.in-show{ height: 100px; width: 120px; padding: 10px; background-color: orange; margin: 10px auto 0; line-height: 1.5; border-radius: 20px; text-align: center; word-break: break-all; overflow: hidden; transition: 0.5s;}</style></head><body><div class="box" id="box"> <h1 class="tit">15种方法实现显示和隐藏div</h1> <ul class="list"></ul></div><script>var oBox = $（"box"）;var oList = $（oBox,"ul"）[0];var data = ["display","visibility","absolute","margin负值","relative","width/height","opacity/rgba","hidden","skew","scale","translate","rotate","overflow","z-index","border-box"]; //生成结构function fnNew（i）{ var sHtml = ""; sHtml += "<div class="in-con"><button class="in-btn_s">显示</button><button class="in-btn_h">隐藏</button> </div> <div class="in-show">第"+ （i+1） +"种方法:<br>"+ data[i]+"</div>"; var element = document.createElement（"li"）; element.className = "in"; element.innerHTML = sHtml; oList.appendChild（element）; } for（var i = 0; i < data.length; i++）{ fnNew（i）; var oIn = oList.getElementsByTagName（"li"）[i]; var aBtn = oIn.getElementsByTagName（"button"）; var oShow = oIn.getElementsByTagName（"div"）[1]; for（var j = 0 ; j < 2; j++）{aBtn[j].m = oShow;aBtn[j].i = i;aBtn[j].j = j;aBtn[j].onclick = function（）{ fn（this.m,this.j,this.i）;} } }function fn（obj,switcher,index）{ switch（index）{//【方法一】display: block/nonecase 0: if（！switcher）{obj.style.display = "block"; }else{obj.style.display = "none"; }break;//【方法二】visibility:true/falsecase 1: if（！switcher）{obj.style.visibility = "visible"; }else{obj.style.visibility = "hidden"; }break;//【方法三】absolute+top/staticcase 2: if（！switcher）{obj.style.cssText = "position:static"; }else{obj.style.cssText = "position:absolute;top:-999px"; }break;//【方法四】margin-topcase 3: if（！switcher）{obj.style.cssText = "margin-top: 10px"; }else{obj.style.cssText = "margin-top:-999px"; }break;//【方法五】relative + top / staticcase 4: if（！switcher）{obj.style.cssText = "position: static"; }else{obj.style.cssText = "position: relative; top: -999px"; }break;//【方法六】width/heightcase 5: if（！switcher）{obj.style.cssText = "width:100px; padding: 10px"; }else{obj.style.cssText = "width:0; padding: 0"; }break;//【方法七】opacity/rgbacase 6: if（！switcher）{obj.style.opacity = "1"; }else{obj.style.opacity = "0"; }break;//【方法八】hiddencase 7: if（！switcher）{obj.hidden = false; }else{obj.hidden = true; }break;//【方法九】skewcase 8: if（！switcher）{obj.style.transform = "skew（0）"; }else{obj.style.transform = "skew（90deg）"; }break;//【方法十】scalecase 9: if（！switcher）{obj.style.transform = "scale（1）"; }else{obj.style.transform = "scale（0）"; }break;//【方法十一】translatecase 10: if（！switcher）{obj.style.transform = "translateX（0）"; }else{obj.style.transform = "translateX（-999px）"; }break;//【方法十二】rotatecase 11: if（！switcher）{obj.style.transform = "rotateX（0）"; }else{obj.style.transform = "rotateX（90deg）"; }break;//【方法十三】overflowcase 12: if（！switcher）{obj.style.cssText = "transform: translateX（0）"; }else{obj.style.cssText = "transform: translateX（220px）"; }break;//【方法十四】z-indexcase 13: var element = document.createElement（"div"）; element.style.cssText = "height: 100px;width: 120px;padding: 10px;background-color: white; margin-top: 10px;margin-left: 13%;position:absolute ;z-index: -1"; obj.parentNode.appendChild（element）; if（！switcher）{obj.style.cssText = "";obj.parentNode.style.position = "static"; }else{obj.style.cssText = "z-index:-1; position:absolute;margin-left: 13%;";obj.parentNode.style.position = "relative"; }break;//【方法十五】border-boxcase 14: if（！switcher）{obj.style.cssText = ""; }else{obj.style.cssText = "padding: 0; box-sizing: border-box; border: 50px solid white;"; }break;}}</script></body></html>

我们再来看下其他小伙伴是如何实现的

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>oec2003</title><script language="JavaScript" type="text/JavaScript"><！--function toggle（targetid）{if （document.getElementById）{target=document.getElementById（targetid）;if （target.style.display=="block"）{target.style.display="none";} else {target.style.display="block";}}}--></script><style type="text/css"><！--#div1{background-color:#000000;height:400px;width:400px;display:none;}--></style></head><body><input type="button" id="butn" value="显示/隐藏" onclick="toggle（"div1"）" /><center><div id="div1"></div></center>居中的DIV</body></html>

示例三：
先来看一个最简单的实例,这个可以实现显示和隐藏层

<div id="text"></div><input type="button" onclick="display（"text"）" />function $_（id）{ return document.getElementById（id）;};function display（x）{ $（x）.style.display=（$（x）.style.display=="none"）?"":"none";};

下面是关闭层，其实原理是一样的只是加了个效果。

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{ position:relative;}.wang{ width:100%; height:100%; background:#CCC; display:none; z-index:10; position:fixed; top:0px; left:150px; margin:0 auto; left:inherit; padding:0;filter:alpha（opacity=60）; /* 针对IE浏览器的透明度 */opacity:0.6; /* 针对FF浏览器的透明度 */}.wang ul{ width:100px; height:100px; margin:0 auto;}</style></head><body><a onclick="dianji（）">弹出</a><input type="text" /><div class="wang" id="xian" onclick="guanbi（）"><ul><form><label>姓名</label><input id="wangyan" type="text" /><br /><label>密码</label><button style="width:100px; height:100px;" onclick="guanbi（this）">关闭</button></form></ul></div><script type="text/javascript">function dianji（）{x=document.getElementById（"xian"）;x.style.display="block";return false;}function guanbi（name）{ var c=document.getElementById（"wangyan"）.value;if（c==3）{x.style.display="none";return false;}}</script></body></html>