隱藏或顯現

用 javascript 隱藏或顯現內容。

範例說明：
1. 此範例利用風格表的 DISPLAY 特徵隱藏或顯現 DIV 區塊的內容。
2. ONCLICK 事件會啟動 show() 函式。
3. style 物件可以動態設定不同值，達到隱藏或顯現的效果。

<script type='text/javascript'> function show(obj, id) { var o=document.getElementById(id); if( o.style.display == 'none' ) { o.style.display=''; obj.innerHTML='隱藏'; } else { o.style.display='none'; obj.innerHTML='顯現'; } } </script> 請用滑鼠點此： <span onclick='show(this, "box")' style='background:green'> 顯現</span> <div id='box' style='display:none; background:blue'> 您好！ <p>這塊內容可以隱藏或顯現。 </div>

• 程式用法：

  <script type='text/javascript'>
  function show(obj, id)
  {
    var o=document.getElementById(id);
    if( o.style.display == 'none' )
    {
      o.style.display='';
      obj.innerHTML='隱藏';
    }
    else
    {
      o.style.display='none';
      obj.innerHTML='顯現';
    }
  }
  </script>
  請用滑鼠點此：
  <span onclick='show(this, "box")' 
    style='background:green'>
  顯現</span>
  <div id='box' style='display:none; background:blue'>
  您好！
  <p>這塊內容可以隱藏或顯現。
  </div>
  

• 執行結果：

  請用滑鼠點此： 顯現

  您好！

  這塊內容可以隱藏或顯現。