javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
更新時(shí)間：2015年08月14日 09:02:19 投稿：hebedich
本文章通過幾個(gè)簡(jiǎn)單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。
javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15種方法實(shí)現(xiàn)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種方法實(shí)現(xiàn)顯示和隱藏div</h1>
<ul class="list"></ul>
</div>
<script>
var oBox = $('box');
var oList = $(oBox,'ul')[0];
var data = ['display','visibility','absolute','margin負(fù)值','relative','width/height','opacity/rgba','hidden','skew','scale','translate','rotate','overflow','z-index','border-box'];
//生成結(jié)構(gòu)
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>
我們?cè)賮砜聪缕渌』锇槭侨绾螌?shí)現(xiàn)的
<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>
示例三：
先來看一個(gè)最簡(jiǎn)單的實(shí)例,這個(gè)可以實(shí)現(xiàn)顯示和隱藏層
<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";
};
下面是關(guān)閉層，其實(shí)原理 是一樣的只是加了個(gè)效果。
<!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>無標(biāo)題文檔</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); /* 針對(duì)IE瀏覽器的透明度 */
opacity:0.6; /* 針對(duì)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)">關(guān)閉</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>
相關(guān)文章
詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對(duì)于某一個(gè)頁(yè)面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長(zhǎng),為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10
JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
javascript refresh page，頁(yè)面刷新實(shí)現(xiàn)代碼。2009-07-07
這篇文章主要介紹了JavaScript進(jìn)度管理，對(duì)進(jìn)度管理感興趣的同學(xué)，可以參考下2021-04-04
JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法，有需要的朋友可以參考一下2013-11-11
JS實(shí)現(xiàn)的tab頁(yè)切換效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的tab頁(yè)切換效果,涉及javascript基于事件響應(yīng)動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
下面小編就為大家?guī)硪黄趈avascript中的typeof和類型判斷(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)播放音頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07