如何判定現(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.pantone-color.com.cn/news/web.html