首页 > 代码库 > offset、client和scroll

offset、client和scroll

2024-11-16 11:29:02   203人阅读

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


联系
我们