javascript实现显示和隐藏div方法汇总
<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种方法实现显示和隐藏divh1><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 += '\\\\第'+ (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/nonecase 0:if(!switcher){obj.style.display = 'block';}else{obj.style.display = 'none';}break;//【方法二】visibility:true/falsecase 1:if(!switcher){obj.style.visibility = 'visible';}else{obj.style.visibility = 'hidden';}break;//【方法三】absolute+top/staticcase 2:if(!switcher){obj.style.cssText = 'position:static';}else{obj.style.cssText = 'position:absolute;top:-999px';}break;//【方法四】margin-topcase 3:if(!switcher){obj.style.cssText = 'margin-top: 10px';}else{obj.style.cssText = 'margin-top:-999px';}break;//【方法五】relative + top / staticcase 4:if(!switcher){obj.style.cssText = 'position: static';}else{obj.style.cssText = 'position: relative; top: -999px';}break;//【方法六】width/heightcase 5:if(!switcher){obj.style.cssText = 'width:100px; padding: 10px';}else{obj.style.cssText = 'width:0; padding: 0';}break;//【方法七】opacity/rgbacase 6:if(!switcher){obj.style.opacity = '1';}else{obj.style.opacity = '0';}break;//【方法八】hiddencase 7:if(!switcher){obj.hidden = false;}else{obj.hidden = true;}break;//【方法九】skewcase 8:if(!switcher){obj.style.transform = 'skew(0)';}else{obj.style.transform = 'skew(90deg)';}break;//【方法十】scalecase 9:if(!switcher){obj.style.transform = 'scale(1)';}else{obj.style.transform = 'scale(0)';}break;//【方法十一】translatecase 10:if(!switcher){obj.style.transform = 'translateX(0)';}else{obj.style.transform = 'translateX(-999px)';}break;//【方法十二】rotatecase 11:if(!switcher){obj.style.transform = 'rotateX(0)';}else{obj.style.transform = 'rotateX(90deg)';}break;//【方法十三】overflowcase 12:if(!switcher){obj.style.cssText = 'transform: translateX(0)';}else{obj.style.cssText = 'transform: translateX(220px)';}break;//【方法十四】z-indexcase 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-boxcase 14:if(!switcher){obj.style.cssText = '';}else{obj.style.cssText = 'padding: 0; box-sizing: border-box; border: 50px solid white;';}break; }
}
script>
body>
html>转自：http://www.jb51.net/article/71055.htm
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！