js中的offset、client和scroll

offSet家族

offsetWidth 和 offsetHeight

获取对象自身的宽度和高度 ,包括内容、边框和内边距,即:offsetWidth = width + border + padding

offsetLeft 和 offsetTop

距离第一个有定位的父级盒子左边和上边的距离,注意:父级盒子必须要有定位,如果没有,则最终以body为准!



scroll家族

基本概念

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;



clientWidth和clientHeight

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

clientLeft和clientTop

返回的是元素边框的borderWidth,

如果不指定一个边框或者不定位改元素,其值就为0



offset、client和scroll的区别分析

left和top分析:

clientLeft: 左边边框的宽度;clientTop: 上边边框的宽度

offsetLeft: 当前元素距离有定位的父盒子左边的距离;offsetTop: 当前元素距离有定位的父盒子上边的距离

scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

width和height分析

clientWidth\/Height: 内容 + 内边距

offsetWidth\/Height: 内容 + 内边距 + 边框

scrollWidth\/Height: 滚动内容的宽度和高度

你可能感兴趣的:(js中的offset、client和scroll)