說明，本文所有內容都基於各瀏覽器的標準渲染模式。也就是在HTML文件首部有標籤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）左上角post
var point_y = evt.clientY;測試
var point_x = evt.clientX;.net
其中evt爲鼠標點擊事件。htm
2）可視區域左上角的座標，相對於整個頁面(Page)左上角blog
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的時候，該數值纔有意義；
說明，本文所有內容都基於各瀏覽器的標準渲染模式。也就是在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的時候，該數值纔有意義；