标签:
offset
offsetWidth:获取元素的可视宽度,包括元素的边框(border),水平padding,垂直滚动条宽度,元素本身宽度;
offsetHeight:获取元素的可视高度,包括元素的边框(border),垂直padding,水平滚动条高度,元素本身高度;
(类似于jQuery中的outerWidth()和outerHeight()方法)
offsetLeft:获取对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量;
offsetTop:获取对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量;
(类似于jQuery中的position()方法返回的对象的top,left属性)
如果offsetParent是body,此属性在不同浏览器中有差异:
IE8/9/10及Chrome中,offsetLeft = (body的margin-left) + (body的border-width) + (body的padding-left) + (元素本身的margin-left);
在FireFox中,offsetLeft = (body的margin-left) + (body的padding-left) + (当前元素的margin-left)。
如果offsetParent不是body,此属性一致:
offsetLeft=(offsetParent的padding-left) + (中间元素的offsetWidth) + (当前元素的margin-left);
offsetTop=(offsetParent的padding-top) + (中间元素的offsetHeight) + (当前元素的margin-top)。
offsetParent返回一个距离调用offsetParent的元素最近的并且定位过的祖先元素的引用。 如果祖先元素都未定位, 则offsetParent返回根元素的引用。
scroll
scrollWidth:获取元素的滚动宽度;
scrollHeigh:获取元素的滚动高度;
scrollLeft:获取或设置对象左边界和窗口中可见内容的最左端之间的距离;
scrollTop:获取或设置对象上边界和窗口中可见内容的最顶端之间的距离。
document.body.scrollTop: 网页被卷去的高度;
document.body.scrollLeft: 网页被卷去的宽度;
client
document.documentElement.clientWidth:浏览器视口的宽度(兼容);
document.documentElement.clientHeight:浏览器视口的高度(兼容);
event.clientX:触发事件的位置相对于文档的水平座标(类似于jQuery中的event.pageX);
event.clientY:触发事件的位置相对于文档的垂直座标(类似于jQuery中的event.pageY);
event.offsetX:触发事件的位置相对于容器的水平坐标;
event.offsetY:触发事件的位置相对于容器的垂直坐标。
offset、client和scroll
标签:
原文地址:http://www.cnblogs.com/happyfreelife/p/4248404.html