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

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

更新時間:2016年11月29日16時19分來源:傳智播客web前端培訓(xùn)學(xué)院瀏覽次數(shù):

如何判定現(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代碼

//計算窗口的高寬和滾動條的位置
alert(window.top.document.compatMode) ;//區(qū)分怪異模式或標準模式
var cw = window.top.document.compatMode == "BackCompat" ?window.top.document.body.clientWidth:window.top.document.documentElement.clientWidth;//窗體高度
var ch = window.top.document.compatMode == "BackCompat" ?window.top.document.body.clientHeight:window.top.document.documentElement.clientHeight;//窗體寬度//必須考慮文本框處于頁面邊緣處，控件顯示不全的問題
var sw = Math.max(window.top.document.documentElement.scrollLeft, window.top.document.body.scrollLeft);//橫向滾動條位置
var sh = Math.max(window.top.document.documentElement.scrollTop, window.top.document.body.scrollTop);//縱向滾動條位置//考慮滾動的情況
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代碼

var Width_1=document.body.scrollWidth; //body滾動條總寬
var Height_1=document.body.scrollHeight; //body滾動條總高
var Width_2=document.documentElement.scrollWidth; //documentElement滾動條總寬
var Height_2=document.documentElement.scrollHeight; //documentElement滾動條總寬
//------------------------------
var Width_3=document.body.clientWidth; //body網(wǎng)頁可見區(qū)域?qū)?，滾動條隱藏部分不算
var Height_3=document.body.clientHeight; //body網(wǎng)頁可見區(qū)域高，滾動條隱藏部分不算
var Width_4=document.documentElement.clientWidth; //documentElement網(wǎng)頁可見區(qū)域?qū)?，滾動條隱藏部分不算
var Height_4=document.documentElement.clientHeight; //documentElement網(wǎng)頁可見區(qū)域高，滾動條隱藏部分不算
//------------------------------
var Width_5=window.screen.availWidth; //屏幕可用工作區(qū)寬度(用處不大)
var Height_5=window.screen.availHeight;//屏幕可用工作區(qū)高度
//------------------------------
var scrollLeft_7=window.top.document.body.scrollLeft;//body水平滾動條位置
var scrollTop_7=window.top.document.body.scrollTop;//body垂直滾動條位置
var scrollLeft_8=window.top.document.documentElement.scrollLeft;//documentElement水平滾動條位置
var scrollTop_8=window.top.document.documentElement.scrollTop;//documentElement垂直滾動條位置
alert(" body滾動條總寬:"+Width_1+",body滾動條總高:"+Height_1+
",\n documentElement滾動條總寬:"+Width_2+",documentElement滾動條總高:"+Height_2+
",\n"+
"\n body網(wǎng)頁可見區(qū)域?qū)?"+Width_3+",body網(wǎng)頁可見區(qū)域高:"+Height_3+
",\n documentElement網(wǎng)頁可見區(qū)域?qū)挘?quot;+ Width_4+",documentElement網(wǎng)頁可見區(qū)域高："+Height_4+
",\n"+
"\n 屏幕可用工作區(qū)寬度:"+Width_5+", 屏幕可用工作區(qū)高度："+Height_5+
",\n"+
"\n body水平滾動條位置:"+scrollLeft_7+",body垂直滾動條位置:"+scrollTop_7+
",\n documentElement水平滾動條位置:"+scrollLeft_8+",documentElement垂直滾動條位置:"+scrollTop_8
);

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ā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：傳智播客web前端培訓(xùn)學(xué)院；
首發(fā)：http://m.metathetuscanyresort.com/web/ 8種C

上一篇：WEB前端培訓(xùn)之javaScript 計算網(wǎng)頁內(nèi)容的寬與高 (瀏覽器的標準模式與怪異模式)一 下一篇：WEB前端培訓(xùn)之iframe高度自適應(yīng)、載入完成事件