码迷,mamicode.com
首页 > 其他好文 > 详细

offset、client和scroll

时间:2015-01-25 18:07:48      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!