javascript的event對象的clientX,offsetX,screenX,pageX 弄得頭暈，於是決定做個圖來區分一下
event.clientX、event.clientY
鼠標相對於瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。IE事件和標准事件都定義了這2個屬性
event.pageX、event.pageY
類似於event.clientX、event.clientY，但它們使用的是文檔坐標而非窗口坐標。這2個屬性不是標准屬性，但得到了廣泛支持。IE事件中沒有這2個屬性。
event.offsetX、event.offsetY
鼠標相對於事件源元素（srcElement）的X,Y坐標，只有IE事件有這2個屬性，標准事件沒有對應的屬性。
event.screenX、event.screenY
鼠標相對於用戶顯示器屏幕左上角的X,Y坐標。標准事件和IE事件都定義了這2個屬性
網頁可見區域寬： 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
<script language="javascript">
function screenInfo(){
var s = "";
s += "\r\n網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域寬："+ document.body.offsetWidth +" (包括邊線的寬)";
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被卷去的高："+ document.body.scrollTop;
s += "\r\n網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作區寬度："+ window.screen.availWidth;
alert(s);
}
</script>