visibility:hidden
僅僅是視覺上看不見，原位置存在
display:none
不光看不見，位置也沒有
js實作點選按鈕更改visibility display屬性
<!DOCTYPE html>
<html>
<head>
<title>visibility與display差別</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
border: 1px solid black;
}
.visibility,
.display{
float: left;
}
.visibility::after,
.display::after{
content: '';
clear: both;
display: block;
}
.visibility,
.display{
text-align: center;
line-height: 20px;
width: 300px;
height: 100px;
}
.contain div span,
.contain div input{
display: block;
text-align: center;
}
.contain{
width: 100%;
height: 100%;
padding: 100px 30%;
}
.btn{
width: 100px;
height: 30px;
cursor:pointer;
}
#s1,
#s2{
background-color: blue;
}
</style>
</head>
<body>
<div class="contain">
<div class="visibility">
<span id="s1">visibility:hidden</span>
<input class="btn" onclick="change1()" id="input1" type="button" value="隐藏" name="">
</div>
<div class="display">
<span id="s2">display:none</span>
<input class="btn" onclick="change2()" id="input2" type="button" value="隐藏" name="">
</div>
</div>
<script type="text/javascript">
//狀态
var status1 = 'display';
var status2 = 'display';
var span1 = document.getElementById('s1');
var span2 = document.getElementById('s2');
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
function change1(){
if (status1 === 'display') {
span1.style.visibility = 'hidden';
input1.value = '顯示';
status1 = 'hide';
}else{
span1.style.visibility = '';
input1.value = '隐藏';
status1 = 'display';
}
}
function change2(){
if (status2 === 'display') {
span2.style.display = 'none';
input2.value = '顯示'
status2 = 'hide';
}else{
span2.style.display = '';
input2.value = '隐藏';
status2 = 'display';
}
}
</script>
</body>
</html>
第二道
第一種方法
<!DOCTYPE html>
<html>
<head>
<title>position display float</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;/*清除樣式*/
padding: 0;
}
.wrapper{
border:1px solid black;
position: relative;
}
.wrapper,
.contain1,
.contain2{
overflow: hidden;/*觸發bfc*/
}
.wrapper div ul{
float: left;
width: 50%;
}
.wrapper div ul::after{
/*清楚浮動流*/
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contain1">
<ul>
<input type="checkbox" value="清新" name="">
<label>清新</label>
</ul>
<ul>
<input type="checkbox" value="節奏" name="">
<label>節奏</label>
</ul>
</div>
<div class="contain2">
<ul>
<li>I don't want to talk about it</li>
<li>Those sweet words</li>
<li>Close to you</li>
</ul>
<ul>
<li>I want it that way</li>
<li>Just give me a reason</li>
</ul>
</div>
</div>
</body>
</html>
第二種方法
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
}
.wrapper{
border: 1px solid black;
}
.contain{
position: relative;
width: 100%;
}
#x,
#y{
position: absolute;
left: 50%;
top: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contain">
<ul>
<input type="checkbox" name="">
<span>清新</span>
</ul>
<ul id="x">
<input type="checkbox" name="">
<span>節奏</span>
</ul>
</div>
<div class="contain">
<ul>
<li>I don't want to talk about it</li>
<li>Those sweet words</li>
<li>Close to you</li>
</ul>
<ul id="y">
<li>I want it that way</li>
<li>Just give me a reason</li>
</ul>
</div>
</div>
</body>
</html>
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)