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>