javascript实现显示和隐藏div方法汇总

15种方法实现div显示和隐藏

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;

}

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 += '

\

';

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;

}

}

我们再来看下其他小伙伴是如何实现的

oec2003

居中的DIV

示例三：

先来看一个最简单的实例,这个可以实现显示和隐藏层

function $_(id){

return document.getElementById(id);

};

function display(x){

$(x).style.display=($(x).style.display=="none")?"":"none";

};

下面是关闭层，其实原理 是一样的只是加了个效果。

无标题文档

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;}

弹出

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;

}

}