posts - 195, comments - 34, trackbacks - 0, articles - 1

          div的visibility和display屬性的區別

          Posted on 2010-09-14 13:47 小強摩羯座 閱讀(1035) 評論(0)  編輯  收藏 所屬分類: Java
          •  前者:看見與不看見,但是位置保留。
                •  后者處理與位置有關:block, inline, none 分別是有前后換行,不換行,不顯示功能但是不保留位置。
              
              
          •  二者功能差異:保留位置,和位置形式

              
          <script language="javascript">
              function toggleVisibility(me)
              {
              
          if(me.style.visibility=="hidden")
              {
              me.style.visibility
          ="visible";
              }

              
          else
              {
              me.style.visibility
          ="hidden";
              }
              }

              
          </script>

              
          <DIV  onclick="toggleVisibility(this)"

              style
          ="position:relative">

              第一行文本將會觸發
          "hidden""visible"屬性,注意第二行的變化。

              
          </DIV>

              
          <DIV>因為visibility會保留元素的位置,所以第二行不會移動.</DIV>

              
          <script language="javascript">

              function toggleDisplay(me){

              
          if(me.style.display=="block"){

              me.style.display
          ="inline";

              alert(
          "文本現在是:'inline'.");

              }

              
          else{

              
          if(me.style.display=="inline"){

              me.style.display
          ="none";

              alert(
          "文本現在是:'none'.3秒鐘后自動重新顯示。");

              window.setTimeout(
          "blueText.style.display='block';",

              
          3000,"javascript");

              }

              
          else{

              me.style.display
          ="block";

              alert(
          "文本現在是:'block'.");

              }

              }

              }

              
          </script>

              
          <DIV><span id="blueText"

              onclick
          ="toggleDisplay(this)"

              style
          ="color:blue;position:relative;cursor:hand;">

              藍色
          </span>文字上點擊來查看效果.</DIV>


          主站蜘蛛池模板: 桂东县| 蒲江县| 葵青区| 永州市| 名山县| 井研县| 西充县| 汉川市| 卢湾区| 哈密市| 萨嘎县| 嘉禾县| 东乌珠穆沁旗| 博兴县| 香港| 东阳市| 杨浦区| 四会市| 桦南县| 万山特区| 辰溪县| 白朗县| 新源县| 勃利县| 定远县| 南丰县| 浦县| 彭州市| 施秉县| 岗巴县| 兴宁市| 上思县| 安吉县| 凤山市| 石河子市| 自贡市| 义马市| 青浦区| 福泉市| 尉氏县| 鄯善县|