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;
}
15种方法实现显示和隐藏div
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 += '
\
显示\
隐藏\
\第'+ (i+1) +'种方法:
'+ data[i]+'';
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;
}
}
我们再来看下其他小伙伴是如何实现的
oec
居中的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;
}
}
