javascript中常用坐标属性offset、scroll、client

参考

1、在文档（document）对象里面用：

scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度，相当于整个页面的总宽度的样子–网页正文全宽;IE下有单位)

var scrollWidth=document.body.scrollWidth || document.documentElement.scrollWidth;
var scrollHeight=document.body.scrollHeight || document.documentElement.scrollHeight;

scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（页面利用滚动条滚动到右边时，隐藏在滚动条左边的页面宽度—页面被卷去左边）

var scrollTop=document.body.scrollTop ||document.documentElement.scrollTop;
var scrollLeft=document.body.scrollLeft ||document.documentElement.scrollLeft;

2、在节点对象里面用：

offsetLeft/Top:获取对象相对于版面（css里面没有进行定位，则offsetParent取值为根元素进行计算）或由 offsetParent 属性指定的父坐标的计算左侧位置（当有css定位时，当前对象相对与offsetParent元素的距离）

body{
width:2000px;
height: 5000px;
}
.box1{
height:200px;
border:20px solid #f00;
padding: 20px;
margin:20px;
position: relative;
}
.box2{
width:100px;
height:100px;
border: 10px solid #ff0;
padding: 10px;
margin:10px;
position: absolute;
top: 20px;
left: 32px;
}
body>div.box1>div.box2
box1.offsetParent;//body
box1.offsetParent.offsetLeft/offsetTop;//0
box1.offsetLeft;//28(margin+浏览器默认外边距)
box1.offsetTop;//20（margin-top）
box2.offsetParent;//box1
box2.offsetLeft;//42(left+margin-left)
box2.offsetTop;//30(top+margin-top)
PS:定位元素是从父元素（带有相对定位）border内侧开始的忽略父元素的padding，而本身是从margin开始算起；

offsetWidth/Height (width+padding+border)

获取当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别：1)style.width返回值除了数字外还带有单位px；

2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；

3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；

box1.offsetParent.offsetWidth;//2000
box1.offsetParent.offsetHeight;//5000
box1.offsetWidth;//280
box1.offsetHeight;//280
box2.offsetWidth;//140
box2.offsetHeight;//140

offsetLeft :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别：1)style.left返回值除了数字外还带有单位px；

2)如对象到其上级层左边的距离设定值为百分比，style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；

3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE 1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；

2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder； 这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？

FF 上述两种情况：offsetTop=margin+padding ;

(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

clientWidth/Height:

获取对象可见内容的宽度，不包括滚动条，不包括边框；

box1.offsetParent.clientWidth;//2000
box1.offsetParent.clientHeight;//5000
box1.clientWidth;//240(width+padding)
box1.clientHeight;//240(height+padding)
box2.clientWidth;//120(width+padding)
box2.clientHeight;//120(height+padding)

clientLeft/Top(没有right和bottom):

获取对象的border宽度

box1.offsetParent.clientLeft;//0
box1.offsetParent.clientTop;//0
box1.clientLeft;//20(border)
box1.clientTop;//20(border)
box2.clientLeft;//10(border)
box2.clientTop;//10(border)

3、事件里面用的(触发事件鼠标的相对坐标)：

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

4、屏幕的：

window.screenTop 网页正文部分上

window.screenLeft 网页正文部分左

window.screen.height 屏幕分辨率的高

window.screen.width 屏幕分辨率的宽

window.screen.availHeight 屏幕可用工作区的高度

window.screen.availWidth 屏幕可用工作区的宽度

document.documentElement.scrollTop 垂直方向滚动的值

网页可见区域宽： 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;