首頁技術(shù)文章正文

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

更新時間:2017-05-24 來源:黑馬程序員web前端培訓學院 瀏覽量:


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

 
 
 
  
 
 
 
 
 
-------------------------------------------------模態(tài)窗口----------------------------------------------------
 
我們想做一個DIV蒙層，中間放一個iframe,做一個像模態(tài)窗口的dialog工具
 
 思路如下：
取出頁面 網(wǎng)頁可見區(qū)域 的寬與高， 進行蒙層，
通過CSS的固定定位屬性{position:fixed}來實現(xiàn)，可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置，
這樣拖動滾動條時， 蒙層不會移動，一直在中心位置。
中心位置放一個iframe,用來顯示其它網(wǎng)頁，并可以提交表單。
 
可以用以下代碼計算 蒙層的寬與高：
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:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
scrollHeight: 獲取對象的滾動高度。
 
obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側(cè)位置，整型，單位像素。
obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據(jù)的高度，整型，單位像素
 
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
 
clientWidth  內(nèi)容可視區(qū)域的寬度
clientHeight 內(nèi)容可視區(qū)域的高度
clientTop    內(nèi)容可視區(qū)域相對容器的垂直坐標
clientLeft   內(nèi)容可視區(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網(wǎng)頁可見區(qū)域?qū)?，滾動條隱藏部分不算       
  9. var Height_3=document.body.clientHeight; //body網(wǎng)頁可見區(qū)域高，滾動條隱藏部分不算    
  10.     
  11. var Width_4=document.documentElement.clientWidth;   //documentElement網(wǎng)頁可見區(qū)域?qū)?，滾動條隱藏部分不算     
  12. var Height_4=document.documentElement.clientHeight; //documentElement網(wǎng)頁可見區(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網(wǎng)頁可見區(qū)域?qū)?"+Width_3+",body網(wǎng)頁可見區(qū)域高:"+Height_3+     
  29.     ",\n documentElement網(wǎng)頁可見區(qū)域?qū)挘?quot;+ Width_4+",documentElement網(wǎng)頁可見區(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 計算網(wǎng)頁內(nèi)容的寬與高 (瀏覽器的標準模式與怪異模式)二
 
 
 (需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
 

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

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

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

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

http://www.w3school.com.cn/htmldom/dom_nodes_access.asp 
 
 
本文版權(quán)歸黑馬程序員web前端開發(fā)學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓學院；
首發(fā)：http://www.itcast.cn/web/ 8種C
分享到：
在線咨詢 我要報名
和我們在線交談！