JS常用坐标offset、scroll、client区分

这一两天研究javascript鼠标拖动问题，遇到了一些坐标的问题，比如OffsetHeight,OffsetWidth,OffsetLeft,OffsetTop,ClientHeigth,ClientWidth,ScrollHeight,ScollWidth,ScrollLeft等概念。它们比较容易混淆。还是在实例中区分，更加直观看到它们的不同和联系。

 

下面贴出示例代码如下：

 

<input type="button" value="移动滚动条，然后点击进行查看" οnclick="move()">
<div id="d" style="background-color:#000000; position:absolute; left:200px; top:100px;width:400;height:300;overflow:scroll"
οnclick="alert(
'offsetLeft:'+this.offsetLeft+'/n'+
'offsetTop:'+this.offsetTop+'/n'+
'scrollWidth:'+this.scrollWidth+'/n'+
'scrollHeight:'+this.scrollHeight+'/n'+
'scrollLeft:'+this.scrollLeft+'/n'+
'offsetHeight:'+this.offsetHeight+'/n'+
'offsetWidth:'+this.offsetWidth+'/n'+
'clientHeight:'+this.clientHeight+'/n'+
'clientWidth:'+this.clientWidth)">
<div style="height:20px;width:380px;background-color:blue"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d");
a=eval(20);
d.scrollLeft+=a;
}
</script>

 

大家可以下来运行，比较比较！！！