使頁面元素隱藏和顯示可以有兩種方式：
方式一：設置元素style屬性中的display
var t = document.getElementById('test');//選取id爲test的元素
t.style.display = 'none'; // 隱藏選擇的元素
t.style.display = 'block'; // 以塊級樣式顯示
方式二：設置元素style屬性中的visibility
var t = document.getElementById('test');
t.style.visibility = 'hidden'; // 隱藏元素
t.style.visibility = 'visible'; // 顯示元素
這兩種方式的區別是：設置display隱藏後不佔用原來的位置，而通過visibility進行隱藏後元素位置任然被佔用。
效果如下所示：
第一種方式隱藏前
隱藏後不佔用原來的位置
第二種方式隱藏前
第二種方式隱藏後，任然佔據原來的位置。
完整代碼如下：
<head>
<script type="text/javascript">
function fn1(){
var t = document.getElementById('test');
if(t.style.display === 'none') {
t.style.display = 'block';// 以塊級元素顯示
} else {
t.style.display = 'none'; // 隱藏
}
}
function fn2(){
var t = document.getElementById('test');
if(t.style.visibility === 'hidden') {
t.style.visibility = 'visible';
} else {
t.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<div id="test" style="border: solid 1px #e81515; width:500px;">
這是一個將要隱藏的DIV。<br>
這是一個將要隱藏的DIV。<br>
這是一個將要隱藏的DIV。<br>
這是一個將要隱藏的DIV。<br>
</div>
<button onclick="fn1()">第一種方式</button>
<button onclick="fn2()">第二種方式</button>
</body>