使用display和visibility都可以隐藏指定的區域，差別是，display隐藏後不會留白白，
而visibility則會在頁面上留有空白。一般，用display的情況要多些！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div層的visibility和display差別</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css" target="_blank" rel="external nofollow" >
<style type="text/css">
.div1{
/**div居中**/
margin:auto;
border:10px solid silver;
background-color:#FF9;
width:300px;
height:300px;
opacity:0.50;/**其他浏覽器（0.5為透明度，在0-1之間的浮點數）**/
filter:alpha(opacity=40);/**IE（40為透明度，在0-100之間的整數）**/
color: black;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<h3 style="color: #cd1636;">div層的visibility和display差別</h3>
使用display和visibility都可以隐藏指定的區域，差別是，display隐藏後不會留白白，<br/>
而visibility則會在頁面上留有空白。一般，用display的情況要多些！<br/>
參考網頁https://blog.csdn.net/qq_44884203/article/details/89292756
<br/>
<div id="testDiv" class="div1" style="background-color:OrangeRed;display:none;">
div層的visibility和display差別
</div>
<div id="testDiv2" class="div1" style="background-color:red;visibility: visible;">
div層的visibility和display差別
</div>
通過設定display屬性可以使div隐藏後釋放占用的頁面空間<br/>
<input type="button" value="div的display" onclick="testDisplay();">
<br/><br/>
div的visibility可以控制div的顯示和隐藏，但是隐藏後頁面顯示空白(即div仍然會占據空間)<br/>
<input type="button" value="div的visibility" onclick="testVisibility();">
<br/><br/>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function testDisplay(){
var divNode = document.getElementById('testDiv');
console.log('****' + divNode.style.display);
if(divNode.style.display == 'none'){
divNode.style.display = '';
}else{
divNode.style.display = 'none';
}
}
function testVisibility(){
var divNode = document.getElementById('testDiv2');
console.log('****' + divNode.style.visibility);
if(divNode.style.visibility == 'hidden'){
divNode.style.visibility = 'visible';
}else{
divNode.style.visibility = 'hidden';
}
}
</script>
</html>