Javascript獲取頁面的各種坐標匯總

說明，本文全部內容都基於各瀏覽器的標准渲染模式。也就是在HTML文件首部有標簽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或

<!DOCTYPE html>

1）鼠標點擊事件的坐標，相對於可視區域（Client）左上角

var point_y = evt.clientY;

var point_x = evt.clientX;

其中evt為鼠標點擊事件。

2）可視區域左上角的坐標，相對於整個頁面(Page)左上角

if(window.pageYOffset != 'undefined') {

point.x = window.pageXOffset;

point.y = window.pageYOffset;

}

else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {

point.x = document.documentElement.scrollLeft;

point.y = document.documentElement.scrollTop;

}

else if(typeof document.body != 'undefined') {

point.x = document.body.scrollLeft;

point.y = document.body.scrollTop;

}

關於document.compatMode，請參考關於document.compatMode的一些介紹

3) 某元素的左上角坐標，相對於整個頁面（Page）左上角

function elementLeft(e)

{

var offset = e.offsetLeft;

if(e.offsetParent != null) offset += elementLeft(e.offsetParent);

return offset;

}

4) 網頁全文高和寬

網頁正文全文寬 document.body.scrollWidth
網頁正文全文高 document.body.scrollHeight

其中，IE7/IE8/IE9/Firefox行為一致，指的都是拋除position=absolute的元素且不管頁面縮放的全文高度；Chrome行為稍有不同，計算寬度和高度時包含了position=absolute的元素；且當頁面縮放時，當全文高度/寬度小於可視區域的高度和寬度時，給出的是可視區域的高度和寬度。

5)屏幕分辨率的高和寬

屏幕分辨率的高 window.screen.height
屏幕分辨率的寬 window.screen.width

其中，當頁面不縮放時，三種瀏覽器的行為一致，都是獲得真實的屏幕分辨率；

當頁面縮放時，Chrome返回的值不變，而IE7/IE8/IE9/Firefox的行為一致，返回屏幕分辨率/縮放比例。

比如，當屏幕分辨率為1920*1200，縮放比例200%時，返回960*600.

6) 網頁可視區域的高和寬

網頁可見區域寬 document.body.clientWidth
網頁可見區域高 document.body.clientHeight

該高度和寬度扣除了瀏覽器右側和底部的滾動條，也扣除了body的margin.

高度 = Min(頁面高度，可視高度）寬度 = Max(頁面寬度，可視高度)

其中，如果頁面底部是某些元素的margin，則此margin不計算在頁面高度內；

注意，頁面縮放后，高度不變，寬度為（原始寬度/縮放比例）

7) 網頁被卷去的高和寬

網頁被卷去的寬度 window.pageXOffset; document.documentElement.scrollLeft;

網頁被卷去的高度 window.pageYOffset;document.documentElement.scrollTop;

其中，前者三種瀏覽器都支持，Chrome不支持后者。

8) 某元素ScrollHeight / OffsetHeight / ClientHeight的區別

OffsetHeight為元素的高度，被擋住的部分同樣計算在內；其父元素的overflow屬性對此值沒有影響；自身的overflow高度對此就沒有影響。

scrollHeight為元素的高度，被擋住的部分同樣計算在內；其父元素的overflow屬性對此值沒有影響；受自身的overflow影響。

clientHeight為元素的高度，被擋住的部分同樣計算在內；其父元素的overflow屬性對此值沒有影響；受自身的overflow影響。

經過測試，發現在所有情形下scrollHeight與clientHeight的值都相同...有點詭異。

注意，IE系列瀏覽器的滾動條的寬度和高度是是固定的16px，不受縮放影響；Firefox和Chrome的滾動條在100%的時候是16px，當縮放時，該寬度和高度發生變化，為（16/縮放比例）px.

9）某元素的OffsetTop

對於position!=absolute的元素，offsettop為其相對於其祖先元素中最近的一個postion=relative或position=absolute的元素的偏移。

對於position=absolute的元素，offsettop為其top屬性指定的值，如果該屬性為空，則與position!=absolute的時候算法相同；

10）某元素的ScrollTop

注意，scrollTop是指某一元素內部的元素被卷去的高度；而不是該元素本身被卷去的高度；

只有當該元素的overflow=auto或scroll的時候，該數值才有意義；