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

WEB前端培訓(xùn)之javaScript 計(jì)算網(wǎng)頁內(nèi)容的寬與高 (瀏覽器的標(biāo)準(zhǔn)模式與怪異模式)二

更新時(shí)間:2017-05-24 來源:黑馬程序員web前端培訓(xùn)學(xué)院 瀏覽量:


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

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

 
 
 
 
 
 
 
----------------------------------------------參考 2-----------------------------------------------------
 
Js代碼  
  1. var Width_1=document.body.scrollWidth;    //body滾動(dòng)條總寬    
  2. var Height_1=document.body.scrollHeight;  //body滾動(dòng)條總高    
  3.     
  4. var Width_2=document.documentElement.scrollWidth;    //documentElement滾動(dòng)條總寬  
  5. var Height_2=document.documentElement.scrollHeight;  //documentElement滾動(dòng)條總寬     
  6.   
  7. //------------------------------  
  8. var Width_3=document.body.clientWidth;   //body網(wǎng)頁可見區(qū)域?qū)?，滾動(dòng)條隱藏部分不算       
  9. var Height_3=document.body.clientHeight; //body網(wǎng)頁可見區(qū)域高，滾動(dòng)條隱藏部分不算    
  10.     
  11. var Width_4=document.documentElement.clientWidth;   //documentElement網(wǎng)頁可見區(qū)域?qū)?，滾動(dòng)條隱藏部分不算     
  12. var Height_4=document.documentElement.clientHeight; //documentElement網(wǎng)頁可見區(qū)域高，滾動(dòng)條隱藏部分不算   
  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水平滾動(dòng)條位置   
  20. var scrollTop_7=window.top.document.body.scrollTop;//body垂直滾動(dòng)條位置  
  21.   
  22. var scrollLeft_8=window.top.document.documentElement.scrollLeft;//documentElement水平滾動(dòng)條位置  
  23. var scrollTop_8=window.top.document.documentElement.scrollTop;//documentElement垂直滾動(dòng)條位置  
  24.     
  25. alert(" body滾動(dòng)條總寬:"+Width_1+",body滾動(dòng)條總高:"+Height_1+     
  26.     ",\n documentElement滾動(dòng)條總寬:"+Width_2+",documentElement滾動(dòng)條總高:"+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水平滾動(dòng)條位置:"+scrollLeft_7+",body垂直滾動(dòng)條位置:"+scrollTop_7+  
  34.     ",\n documentElement水平滾動(dòng)條位置:"+scrollLeft_8+",documentElement垂直滾動(dòng)條位置:"+scrollTop_8  
  35. );            
  javaScript 計(jì)算網(wǎng)頁內(nèi)容的寬與高 (瀏覽器的標(biāo)準(zhǔn)模式與怪異模式)二
 
 
 (需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
 

下面是從w3school查到的,說的不是很詳細(xì)

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

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

第二個(gè)屬性是對(duì) HTML 頁面的特殊擴(kuò)展，提供了對(duì) <body> 標(biāo)簽的直接訪問。 

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