posts - 122,  comments - 25,  trackbacks - 0
          關于瀏覽器的clientHeight、offsetHeight和scrollHeight

          在IE、FireFox、Netscape等不同的瀏覽器里,對于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有著不同的含義,比較容易搞混,現整理一下相關的內容:

          clientHeight:在上述瀏覽器中, clientHeight 的含義是一致的,定義為網頁內容可視區域的高度,即在瀏覽器中可以看到網頁內容的高度,通常是工具條以下到狀態欄以上的整個區域高度,與具體的網頁頁面內容無關。可以理解為,在屏幕上通過瀏覽器窗口所能看到網頁內容的高度。

          offsetHeight:關于offsetHeight,ie和firefox等不同瀏覽中意義有所不同,需要加以區別。在ie中,offsetHeight 的取值為 clientHeight加上滾動條及邊框的高度;而firefox、netscape中,其取值為是實際網頁內容的高度,可能會小于clientHeight。

          scrollHeight:scrollHeight都表示瀏覽器中網頁內容的高度,但稍有區別。在ie里為實際網頁內容的高度,可以小于 clientHeight;在firefox 中為網頁內容高度,最小值等于 clientHeight,即網頁實際內容比clientHeight時,取clientHeight。

          clientWidth、offsetWidth 和 scrollWidth 的含義與上述內容雷同,不過是高度變成寬度而已。

          若希望clientHeight、offsetHeight和scrollHeight三個屬性能取值一致的話,可以通過設置DOCTYPE,啟用不同的解析器,如:<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">,設置DOCTYPE后,這三個屬性都表示實際網頁內容的高度。

          通過以下HTML代碼,可以了解一下這三個屬性的含義:
          <!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional"> //設置DOCTYPE
          <HTML>
           
          <HEAD>
            
          <TITLE> 測試。 </TITLE>
           
          </HEAD>
            
          <script type='text/javascript'>
            window.onload 
          = function(){
              
          var ch = document.body.clientHeight;
              
          var sh = document.body.offsetHeight;
              
          var ssh = document.body.scrollHeight;
              alert('clientHeight:'
          +ch+'; offsetHeight:'+sh+"; scrollHeight:"+ssh);
            }
            
          </script>
           
          <BODY style='margin:0px'>
            
          <div style='background-color:#ccc; height:400px; padding:0px'>
               text
            
          </div>
           
          </BODY>
          </HTML>

          根據頁面內容調整窗口高度的方法:
          Ext.util.ResizeWin = function() {
              
          try {
                  
          var sh = document.documentElement.scrollHeight
                      
          || document.body.scrollHeight;
                  
          var ch = document.documentElement.clientHeight
                      
          || document.body.clientHeight;
                  window.resizeBy(
          0,(sh-ch));
              }
          catch (e){}
          };

          posted on 2009-06-14 16:48 josson 閱讀(1499) 評論(0)  編輯  收藏 所屬分類: web開發
          <2009年6月>
          31123456
          78910111213
          14151617181920
          21222324252627
          2829301234
          567891011

          常用鏈接

          留言簿(3)

          隨筆分類

          隨筆檔案

          收藏夾

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 香格里拉县| 通渭县| 哈密市| 苍溪县| 仙游县| 黄平县| 邢台县| 光山县| 明溪县| 顺昌县| 杭锦后旗| 道孚县| 南投县| 鸡泽县| 阳信县| 盐津县| 惠东县| 武穴市| 新干县| 古交市| 惠水县| 临江市| 万载县| 钟祥市| 巫山县| 昂仁县| 榆树市| 大连市| 浮梁县| 湘潭县| 临武县| 台前县| 阳信县| 浦江县| 安福县| 航空| 镇安县| 日照市| 新余市| 九台市| 蒙自县|