整體布局：
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比較</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
width: 1500px;
height:2000px;
border: 1px solid;
}
div{
border: 1px solid;
left: 100px;
position: relative;
top: 100px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
1.clientX與clientY
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+","+oEvent.clientY);
}
}
oEvent.clientX是指鼠標到可視區左邊框的距離。
oEvent.clientY是指鼠標到可視區上邊框的距離。
2.offsetWidth、offsetHeight、offsetLeft和offsetTop
window.onload=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.offsetWidth);
alert(oDiv.offsetHeight);
alert(oDiv.offsetLeft);
alert(oDiv.offsetTop);
}
offsetWidth是指div的寬度（包括div的邊框）
offsetHeight是指div的高度（包括div的邊框）
offsetLeft是指div到整個頁面左邊框的距離（不包括div的邊框）
offsetTop是指div到整個頁面上邊框的距離（不包括div的邊框）
3.scrollTop、scrollLeft、scrollWidth和scrollHeight
scrollTop是指可視區頂部邊框與整個頁面上部邊框的看不到的區域。
scrollLeft是指可視區左邊邊框與整個頁面左邊邊框的看不到的區域。
scrollWidth是指左邊看不到的區域加可視區加右邊看不到的區域即整個頁面的寬度（包括邊框）
scrollHeight是指上邊看不到的區域加可視區加右邊看不到的區域即整個頁面的高度（包括邊框）
4.clientWidth、clientHeight、clientLeft和clientTop
clientWidth是指可視區的寬度。
clientHeight是指可視區的高度。
clientLeft獲取左邊框的寬度。
clientTop獲取上邊框的寬度。
5.如何兼容
if(document.compatMode == "BackCompat") {//渲染方式 wHeight = document.body.clientHeight; }else {//"CSS1compat" wHeight = document.documentElement.clientHeight; }