html js 点击隐藏div,javascript实现显示和隐藏div方法汇总

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'