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
我们再来看下其他小伙伴是如何实现的
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); opacity:0.6; } .wang ul{ width:100px; height:100px; margin:0 auto;} 弹出
