javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <scriptsrc="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:5pxsolid#333; margin:100pxauto0; overflow:hidden; } .tit{ text-align:center; margin-bottom:20px; } .in-con{ padding-top:10px; overflow:hidden; } .in{ width:188px; height:188px; padding:5px; border:1pxsolid#333; float:left; overflow:hidden; } .in-show{ height:100px; width:120px; padding:10px; background-color:orange; margin:10pxauto0; line-height:1.5; border-radius:20px; text-align:center; word-break:break-all; overflow:hidden; transition:0.5s; } </style> </head> <body> <divclass="box"id="box"> <h1class="tit">15种方法实现显示和隐藏div</h1> <ulclass="list"></ul> </div> <script> varoBox=$('box'); varoList=$(oBox,'ul')[0]; vardata=['display','visibility','absolute','margin负值','relative','width/height','opacity/rgba','hidden','skew','scale','translate','rotate','overflow','z-index','border-box']; //生成结构 functionfnNew(i){ varsHtml=''; sHtml+='<divclass="in-con">\ <buttonclass="in-btn_s">显示</button>\ <buttonclass="in-btn_h">隐藏</button>\ </div>\ <divclass="in-show">第'+(i+1)+'种方法:<br>'+data[i]+'</div>'; varelement=document.createElement('li'); element.className='in'; element.innerHTML=sHtml; oList.appendChild(element); } for(vari=0;i<data.length;i++){ fnNew(i); varoIn=oList.getElementsByTagName('li')[i]; varaBtn=oIn.getElementsByTagName('button'); varoShow=oIn.getElementsByTagName('div')[1]; for(varj=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); } } } functionfn(obj,switcher,index){ switch(index){ //【方法一】display:block/none case0: if(!switcher){ obj.style.display='block'; }else{ obj.style.display='none'; } break; //【方法二】visibility:true/false case1: if(!switcher){ obj.style.visibility='visible'; }else{ obj.style.visibility='hidden'; } break; //【方法三】absolute+top/static case2: if(!switcher){ obj.style.cssText='position:static'; }else{ obj.style.cssText='position:absolute;top:-999px'; } break; //【方法四】margin-top case3: if(!switcher){ obj.style.cssText='margin-top:10px'; }else{ obj.style.cssText='margin-top:-999px'; } break; //【方法五】relative+top/static case4: if(!switcher){ obj.style.cssText='position:static'; }else{ obj.style.cssText='position:relative;top:-999px'; } break; //【方法六】width/height case5: if(!switcher){ obj.style.cssText='width:100px;padding:10px'; }else{ obj.style.cssText='width:0;padding:0'; } break; //【方法七】opacity/rgba case6: if(!switcher){ obj.style.opacity='1'; }else{ obj.style.opacity='0'; } break; //【方法八】hidden case7: if(!switcher){ obj.hidden=false; }else{ obj.hidden=true; } break; //【方法九】skew case8: if(!switcher){ obj.style.transform='skew(0)'; }else{ obj.style.transform='skew(90deg)'; } break; //【方法十】scale case9: if(!switcher){ obj.style.transform='scale(1)'; }else{ obj.style.transform='scale(0)'; } break; //【方法十一】translate case10: if(!switcher){ obj.style.transform='translateX(0)'; }else{ obj.style.transform='translateX(-999px)'; } break; //【方法十二】rotate case11: if(!switcher){ obj.style.transform='rotateX(0)'; }else{ obj.style.transform='rotateX(90deg)'; } break; //【方法十三】overflow case12: if(!switcher){ obj.style.cssText='transform:translateX(0)'; }else{ obj.style.cssText='transform:translateX(220px)'; } break; //【方法十四】z-index case13: varelement=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 case14: if(!switcher){ obj.style.cssText=''; }else{ obj.style.cssText='padding:0;box-sizing:border-box;border:50pxsolidwhite;'; } break; } } </script> </body> </html>
我们再来看下其他小伙伴是如何实现的
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>oec2003</title> <scriptlanguage="JavaScript"type="text/JavaScript"> <!-- functiontoggle(targetid){ if(document.getElementById){ target=document.getElementById(targetid); if(target.style.display=="block"){ target.style.display="none"; }else{ target.style.display="block"; } } } --> </script> <styletype="text/css"> <!-- #div1{ background-color:#000000; height:400px; width:400px; display:none; } --> </style> </head> <body> <inputtype="button"id="butn"value="显示/隐藏"onclick="toggle('div1')"/> <center> <divid="div1"></div></center> 居中的DIV </body> </html>
示例三:
先来看一个最简单的实例,这个可以实现显示和隐藏层
<divid="text"></div><inputtype="button"onclick="display('text')"/> function$_(id){ returndocument.getElementById(id); }; functiondisplay(x){ $(x).style.display=($(x).style.display=="none")?"":"none"; };
下面是关闭层,其实原理是一样的只是加了个效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <styletype="text/css"> body{position:relative;} .wang{width:100%;height:100%;background:#CCC;display:none;z-index:10;position:fixed;top:0px;left:150px;margin:0auto;left:inherit;padding:0;filter:alpha(opacity=60);/*针对IE浏览器的透明度*/ opacity:0.6;/*针对FF浏览器的透明度*/} .wangul{width:100px;height:100px;margin:0auto;} </style> </head> <body> <aonclick="dianji()">弹出</a><inputtype="text"/> <divclass="wang"id="xian"onclick="guanbi()"><ul><form><label>姓名</label><inputid="wangyan"type="text"/><br/><label>密码</label><buttonstyle="width:100px;height:100px;"onclick="guanbi(this)">关闭</button></form></ul></div> <scripttype="text/javascript"> functiondianji(){ x=document.getElementById("xian"); x.style.display="block"; returnfalse; } functionguanbi(name){ varc=document.getElementById("wangyan").value; if(c==3){ x.style.display='none'; returnfalse; } } </script> </body> </html>