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/none case 0: if(!switcher){ obj.style.display = 'block'; }else{ obj.style.display = 'none'; } break; //【方法二】visibility:true/false case 1: if(!switcher){ obj.style.visibility = 'visible'; }else{ obj.style.visibility = 'hidden'; } break; //【方法三】absolute+top/static case 2: if(!switcher){ obj.style.cssText = 'position:static'; }else{ obj.style.cssText = 'position:absolute;top:-999px'; } break; //【方法四】margin-top case 3: if(!switcher){ obj.style.cssText = 'margin-top: 10px'; }else{ obj.style.cssText = 'margin-top:-999px'; } break; //【方法五】relative + top / static case 4: if(!switcher){ obj.style.cssText = 'position: static'; }else{ obj.style.cssText = 'position: relative; top: -999px'; } break; //【方法六】width/height case 5: if(!switcher){ obj.style.cssText = 'width:100px; padding: 10px'; }else{ obj.style.cssText = 'width:0; padding: 0'; } break; //【方法七】opacity/rgba case 6: if(!switcher){ obj.style.opacity = '1'; }else{ obj.style.opacity = '0'; } break; //【方法八】hidden case 7: if(!switcher){ obj.hidden = false; }else{ obj.hidden = true; } break; //【方法九】skew case 8: if(!switcher){ obj.style.transform = 'skew(0)'; }else{ obj.style.transform = 'skew(90deg)'; } break; //【方法十】scale case 9: if(!switcher){ obj.style.transform = 'scale(1)'; }else{ obj.style.transform = 'scale(0)'; } break; //【方法十一】translate case 10: if(!switcher){ obj.style.transform = 'translateX(0)'; }else{ obj.style.transform = 'translateX(-999px)'; } break; //【方法十二】rotate case 11: if(!switcher){ obj.style.transform = 'rotateX(0)'; }else{ obj.style.transform = 'rotateX(90deg)'; } break; //【方法十三】overflow case 12: if(!switcher){ obj.style.cssText = 'transform: translateX(0)'; }else{ obj.style.cssText = 'transform: translateX(220px)'; } break; //【方法十四】z-index case 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-box case 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>新聞熱點
疑難解答
