首頁 > 開發者 > 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的時候，該數值才有意義；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
