JavaScript---offset/scroll/client总结

offset/scroll/client属性表

类别	属性	说明	注意
offset	offsetWidth	获取对象自身的宽度：内容+边框+内边距	包括内容、边框和内边距，即：offsetWidth(Height)= width(Height)+ border + padding
	offsetHeight	获取对象自身的高度：内容+边框+内边距
	offsetLeft	距离第一个有定位的父级盒子左边距离	offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离
	offsetTop	距离第一个有定位的父级盒子上边距离
	offsetParent	返回当前对象的父级（带有定位）盒子	如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。和parentNode的区别，parentNode获取父节点
scroll	scrollWidth	滚动内容的宽度	网页正文全文宽： document.body.scrollWidth;
	scrollHeight	滚动内容的高度	网页正文全文高： document.body.scrollHeight;
	scrollTop	上边滚动的长度	网页被卷去的高： document.body.scrollTop;
	scrollLeft	左边滚动的长度	网页被卷去的左： document.body.scrollLeft;
	scrollTo(x,y)	把内容滚动到指定的坐标
client	clientWidth	对象可见的宽度:内容 + 内边距 不包括滚动条、border	网页可见区域宽： document.body.clientWidth;
	clientHeight	对象可见的高度:内容 + 内边距 不包括滚动条、border	网页可见区域高： document.body.clientHeight;
	clientLeft	左边边框的宽度:边框
	clientTop	上边边框的宽度:边框

offsetParent与parentNode

 

offsetXXX 和 style.XXX的区别

(以offsetLeft和style.left为例分析)

1. style.left 返回的是字符串，如10px，offsetLeft返回的是数值10。
2. style.left可读可写，offsetLeft只读，因此如果想要改变div的位置，只能通过修改元素的style.left实现。
3. style.left的值需要在html标签中进行定义【<div id="son" style="left:100px"> 内层盒子</div>】，才可以通过【son.style.left】获取到值。如果定义在css样式里，通过【son.style.left】获取到值为空。
4. offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
5. 如果没有给当前元素指定过 left 样式，则 style.left 返回的是空字符串

 

兼容性写法

Firefox浏览器 和 其他浏览器

document.documentElement.scrollTop;

Chrome浏览器 和 没有声明 DTD <DOCTYPE >

document.body.scrollTop;

兼容写法 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;