javascript實作顯示和隱藏div方法匯總_javascript技巧-js教程-PHP中文網

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")&#63;"":"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>

登入後複製