有些時候我們需要根據某些條件來控制Web頁面中的HTML元素顯示還是隱藏，可以透過display或visibility來實現。透過下面的範例來了解display和visibility的區別，簡單的範例程式碼如下： 複製程式碼程式碼如下: HTML元素的顯示與隱藏控制 <br /> function showAndHidden1(){ <br />var div1=document.getElementById("div1"); <br />var div2=document.getElementById("div2"); <br />if(div1.style.display=='block' ) div1.style.display='none'; <br />else div1.style.display='block'; <br />if(div2.style.display=='block') div2.style.display='none' ; <br />else div2.style.display='block'; <br />} <br />function showAndHidden2(){ <br />var div3=document.getElementById("div3"); <br />var div3=document.getElementById("div3"); <br />var div4=document. getElementById("div4"); <br />if(div3.style.visibility=='visible') div3.style.visibility='hidden'; <br />else div3.style.visibility='visible'; <br /> if(div4.style.visibility=='visible') div4.style.visibility='hidden'; <br />else div4.style.visibility='visible'; <br />} <br /> display：元素的位置不會被佔用 DIV 1 DIV 2 visibility：元素的位置仍被佔用 DIV 3 DIV 4
