欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現顯示和隱藏div方法匯總

 更新時間：2015年08月14日 09:02:19   投稿：hebedich  
本文章通過幾個簡單的實例告訴你如何來實例關于隱藏與顯示div層及關閉層與隱藏的區(qū)別分析哦，有需要的同學可以參考一下本文章。

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>

相關文章

  • 詳細講解js實現電梯導航的實例

    詳細講解js實現電梯導航的實例

    對于某一個頁面內容繁多,如果我們滾動的時間較長,為了增加用戶體驗,我們需要實現點擊某一個按鈕,然后滾動到對應的區(qū)域,滾動的時候,右側對應的分類實現高亮,所以本文給大家詳細介紹講解了js實現電梯導航,需要的朋友可以參考下
    2023-10-10
  • JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現方法

    JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現方法

    本文通過實例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下
    2017-06-06
  • Jquery把獲取到的input值轉換成json

    Jquery把獲取到的input值轉換成json

    本篇文章主要介紹了Jquery把獲取到的input值轉換成json的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • javascript web頁面刷新的方法收集

    javascript web頁面刷新的方法收集

    javascript refresh page，頁面刷新實現代碼。
    2009-07-07
  • 詳解JavaScript進度管理

    詳解JavaScript進度管理

    這篇文章主要介紹了JavaScript進度管理，對進度管理感興趣的同學，可以參考下
    2021-04-04
  • JavaScript正則驗證密碼強弱度的實現方法

    JavaScript正則驗證密碼強弱度的實現方法

    這篇文章主要介紹了JavaScript正則驗證密碼強弱度的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • javascript利用apply和arguments復用方法

    javascript利用apply和arguments復用方法

    這篇文章主要介紹了javascript利用apply和arguments復用方法，有需要的朋友可以參考一下
    2013-11-11
  • JS實現的tab頁切換效果完整示例

    JS實現的tab頁切換效果完整示例

    這篇文章主要介紹了JS實現的tab頁切換效果,涉及javascript基于事件響應動態(tài)操作頁面元素屬性相關操作技巧,需要的朋友可以參考下
    2018-12-12
  • 基于javascript中的typeof和類型判斷(詳解)

    基于javascript中的typeof和類型判斷(詳解)

    下面小編就為大家?guī)硪黄趈avascript中的typeof和類型判斷(詳解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 微信小程序實現播放音頻功能

    微信小程序實現播放音頻功能

    這篇文章主要為大家詳細介紹了微信小程序實現播放音頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07

最新評論