在設計頁面時可能經常會用到固定層的位置,這就需要獲取一些html對象的坐標以更靈活的設置目標層的坐標,這里可能就會用到document.body.scrollTop等屬性,但是此屬性在xhtml標準網頁或者更簡單的說是帶<!DOCTYPE ..>標簽的頁面里得到的結果是0,如果不要此標簽則一切正常,那么在xhtml頁面怎么獲得body的坐標呢,當然有辦法-使用document.documentElement來取代document.body,可以這樣寫,例:var top = document.documentElement.scrollTop || document.body.scrollTop; 在javascript里||是個好東西,除了能用在if等條件判斷里,還能用在變量賦值上。那么上例等同于下例。例:var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;這么寫可以得到很好的兼容性。
相反,如果不做聲明的話,document.documentElement.scrollTop反而會顯示為0。
順便再存一下這個圖吧,總是挺難記清楚:
以上內容
另外一些基礎知識:
document.body和document.documentElement比較:
document.body是DOM中Document對象里的body節點, document.documentElement是文檔對象根節點(html)的引用。 IE在怪異模型(quick mode)下document.documentElement無法正確取到clietHeight scrollHeight等值,比如clietHeight=0??梢砸奍E的怪異模型并沒有把html作為盒子模型的一部分,好在現在很少使用怪異模型。(注:如果頁面沒寫DTD或寫的不對,IE6默認使用怪異模型解析頁面)
document.body.scrollHeight和document.documentElement.scrollHeight的區別:
document.body.scrollHeight是body元素的滾動高度,document.documentElement.scrollHeight為頁面的滾動高度,且 document.documentElement.scrollHeight在IE和Firefox下還有點小差異。 IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border寬度 firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度
注意:要獲取當前頁面的滾動條縱坐標位置:
document .documentElement.scrollTop;而不是:document .body.scrollTop; documentElement 對應的是 html 標簽,而 body 對應的是 body 標簽。各個屬性如下:
網頁可見區域寬: document .body.clientWidth;網頁可見區域高: document .body.clientHeight;網頁可見區域寬: document .body.offsetWidth (包括邊線的寬);網頁可見區域高: document .body.offsetHeight (包括邊線的寬);網頁正文全文寬: document .body.scrollWidth;網頁正文全文高: document .body.scrollHeight;網頁被卷去的高: document .body.scrollTop;網頁被卷去的左: document .body.scrollLeft;網頁正文部分上: window.screenTop;網頁正文部分左: window.screenLeft;屏幕分辨率的高: window.screen.height;屏幕分辨率的寬: window.screen.width;屏幕可用工作區高度: window.screen.availHeight;屏幕可用工作區寬度:window.screen.availWidth; scrollHeight: 獲取對象的滾動高度。 scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離scrollWidth:獲取對象的滾動寬度offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 event.clientX 相對文檔的水平座標event.clientY 相對文檔的垂直座標event.offsetX 相對容器的水平坐標event.offsetY 相對容器的垂直坐標 document .documentElement.scrollTop 垂直方向滾動的值event.clientX+document .documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
新聞熱點
疑難解答