scroll、offset和client的區別

scroll、offset和client的區別

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獲取上邊框的寬度。