javascript实现显示和隐藏div方法汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="https://www.jb51.net/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> <h1>15种方法实现显示和隐藏div</h1> <ul></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>\ <button>显示</button>\ <button>隐藏</button>\ </div>\ <div>第'+ (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>
我们再来看下其他小伙伴是如何实现的