教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

WEB前端培訓之javaScript 計算網頁內容的寬與高 (瀏覽器的標準模式與怪異模式)二

更新時間:2016年11月29日16時19分 來源:傳智播客web前端培訓學院 瀏覽次數:


 
如何判定現在是標準模式還是怪異模式：
 
方法一：執(zhí)行以下代碼
alert(window.top.document.compatMode) ;
//BackCompat  表示怪異模式
//CSS1Compat  表示標準模式
方法二：jquery為我們提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)
 
 
 
IE6,7,8瀏覽器的標準模式還是怪異模式 盒子模型的 差異
（由于火狐的始終表現的很一致，不種我們操心。所以這里我們重點說IE瀏覽器）

 
 
 
  
 
 
 
 
 
-------------------------------------------------模態(tài)窗口----------------------------------------------------
 
我們想做一個DIV蒙層，中間放一個iframe,做一個像模態(tài)窗口的dialog工具
 
 思路如下：
取出頁面 網頁可見區(qū)域 的寬與高， 進行蒙層，
通過CSS的固定定位屬性{position:fixed}來實現，可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置，
這樣拖動滾動條時， 蒙層不會移動，一直在中心位置。
中心位置放一個iframe,用來顯示其它網頁，并可以提交表單。
 
可以用以下代碼計算 蒙層的寬與高：
Js代碼  
  1. //計算窗口的高寬和滾動條的位置  
  2. alert(window.top.document.compatMode) ;//區(qū)分怪異模式或標準模式  
  3. var cw = window.top.document.compatMode == "BackCompat" ?window.top.document.body.clientWidth:window.top.document.documentElement.clientWidth;//窗體高度  
  4. var ch = window.top.document.compatMode == "BackCompat" ?window.top.document.body.clientHeight:window.top.document.documentElement.clientHeight;//窗體寬度//必須考慮文本框處于頁面邊緣處，控件顯示不全的問題  
  5. var sw = Math.max(window.top.document.documentElement.scrollLeft, window.top.document.body.scrollLeft);//橫向滾動條位置  
  6. var sh = Math.max(window.top.document.documentElement.scrollTop, window.top.document.body.scrollTop);//縱向滾動條位置//考慮滾動的情況           
  7. alert("cw:"+cw+"  ch:"+ch+"  sw:"+sw+"  sh"+sh);  
 
 
 
 
----------------------------------------------參考 1-----------------------------------------------------
 
我們先來認識一下有哪些屬性可以使用：
 
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
scrollHeight: 獲取對象的滾動高度。
 
obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側位置，整型，單位像素。
obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據的高度，整型，單位像素
 
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
 
clientWidth  內容可視區(qū)域的寬度
clientHeight 內容可視區(qū)域的高度
clientTop    內容可視區(qū)域相對容器的垂直坐標
clientLeft   內容可視區(qū)域相對容器的水平坐標 
 
參考圖片：

 
 
 
 
 
 
 
----------------------------------------------參考 2-----------------------------------------------------
 
Js代碼  
  1. var Width_1=document.body.scrollWidth;    //body滾動條總寬    
  2. var Height_1=document.body.scrollHeight;  //body滾動條總高    
  3.     
  4. var Width_2=document.documentElement.scrollWidth;    //documentElement滾動條總寬  
  5. var Height_2=document.documentElement.scrollHeight;  //documentElement滾動條總寬     
  6.   
  7. //------------------------------  
  8. var Width_3=document.body.clientWidth;   //body網頁可見區(qū)域寬，滾動條隱藏部分不算       
  9. var Height_3=document.body.clientHeight; //body網頁可見區(qū)域高，滾動條隱藏部分不算    
  10.     
  11. var Width_4=document.documentElement.clientWidth;   //documentElement網頁可見區(qū)域寬，滾動條隱藏部分不算     
  12. var Height_4=document.documentElement.clientHeight; //documentElement網頁可見區(qū)域高，滾動條隱藏部分不算   
  13.   
  14. //------------------------------  
  15. var Width_5=window.screen.availWidth;  //屏幕可用工作區(qū)寬度(用處不大)     
  16. var Height_5=window.screen.availHeight;//屏幕可用工作區(qū)高度     
  17.   
  18. //------------------------------  
  19. var scrollLeft_7=window.top.document.body.scrollLeft;//body水平滾動條位置   
  20. var scrollTop_7=window.top.document.body.scrollTop;//body垂直滾動條位置  
  21.   
  22. var scrollLeft_8=window.top.document.documentElement.scrollLeft;//documentElement水平滾動條位置  
  23. var scrollTop_8=window.top.document.documentElement.scrollTop;//documentElement垂直滾動條位置  
  24.     
  25. alert(" body滾動條總寬:"+Width_1+",body滾動條總高:"+Height_1+     
  26.     ",\n documentElement滾動條總寬:"+Width_2+",documentElement滾動條總高:"+Height_2+    
  27.     ",\n"+   
  28.     "\n body網頁可見區(qū)域寬:"+Width_3+",body網頁可見區(qū)域高:"+Height_3+     
  29.     ",\n documentElement網頁可見區(qū)域寬："+ Width_4+",documentElement網頁可見區(qū)域高："+Height_4+  
  30.     ",\n"+     
  31.     "\n 屏幕可用工作區(qū)寬度:"+Width_5+", 屏幕可用工作區(qū)高度："+Height_5+  
  32.     ",\n"+  
  33.     "\n body水平滾動條位置:"+scrollLeft_7+",body垂直滾動條位置:"+scrollTop_7+  
  34.     ",\n documentElement水平滾動條位置:"+scrollLeft_8+",documentElement垂直滾動條位置:"+scrollTop_8  
  35. );            
  javaScript 計算網頁內容的寬與高 (瀏覽器的標準模式與怪異模式)二
 
 
 (需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
 

下面是從w3school查到的,說的不是很詳細

根節(jié)點 
有兩種特殊的文檔屬性可用來訪問根節(jié)點： 

document.documentElement 
document.body 
第一個屬性可返回存在于 XML 以及 HTML 文檔中的文檔根節(jié)點。 

第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標簽的直接訪問。 

http://www.w3school.com.cn/htmldom/dom_nodes_access.asp 
 
 
本文版權歸傳智播客web前端開發(fā)學院所有，歡迎轉載，轉載請注明作者出處，謝謝！
作者：傳智播客web前端培訓學院；
首發(fā)：http://www.xamj520.com/web/ 8種C
0 分享到：
和我們在線交談！