offset，client，scroll的使用和区别

2020-05-15

字数：975 阅读时间：5min

阅读量：7899

offset偏移量

offsetWidth：元素在水平方向所占的空间大小(元素的宽；包括外边框，内边距和内容)
offsetHeight：元素子在垂直方向上所占的空间的大小( 元素的高；包括外边框，内边距和内容 )
offsetLeft：元素的左边框到包含元素的左边框的距离(注意包含元素具体是指哪个元素)
offsetTop：元素的上边框到包含元素的上边框的距离 (注意包含元素具体是指哪个元素)
offsetParent：包含该元素的那个元素； (包含元素：并不一定是这个元素的父元素，会沿着DOM树一直向上找直到找到有设置position的元素，这个元素才是该元素的包含元素)

我们使用offsetLeft和offsetTop的时候，一般都是来获取元素距离页面顶部或者左边多少像素;这个时候我们需要利用offsetTop或offsetLeft配合offsetParent循环DOM树累加每一个offset值，直到DOM树的根元素(offsetParent = null)

//自己封装的方法
function elementTo(ele,lfOrTp){//参数：元素和方向
lfOrTp= lfOrTp === 'left'? 'offsetLeft':'offsetTop';//判断参数是left还是top
var offset = ele[lfOrTp];
var currentParent = ele.offsetParent;
while(currentParent != null){//直到DOM元素的根元素
offset += currentParent[lfOrTp];//每个包裹元素的offset相加
currentParent = currentParent.offsetParent;//该变包裹元素
}
return offset;//返回元素距离页面的顶部或者左边的值
}

//自己封装的方法

function elementTo(ele,lfOrTp){//参数：元素和方向

lfOrTp= lfOrTp === 'left'? 'offsetLeft':'offsetTop';//判断参数是left还是top

var offset = ele[lfOrTp];

var currentParent = ele.offsetParent;

while(currentParent != null){//直到DOM元素的根元素

offset += currentParent[lfOrTp];//每个包裹元素的offset相加

currentParent = currentParent.offsetParent;//该变包裹元素

}

return offset;//返回元素距离页面的顶部或者左边的值

}

client客户区

client表示的是元素客户区大小；指的是元素内容和内边距占据空间的大小；
- clientWidth：可视区宽度大小（不包括border）
- clientHeight：可视区高度大小（不包括border）
- clientLeft：可视区的左边距大小（borderLeft的宽度）
- clientTop：可视区上边距的大小（borderTop的大小）

一般我们使用clientWidth或者clientHeight就是获取视窗的大小；使用document.documentElement.clientWidth或者 document.body.clientWidth(兼容IE7以下版本)

scroll滚动区

scrollHeight：卷曲的高度和可视区的高度(即整个高度)
scrollWidth：卷曲的宽度和可视区的宽度(即整个宽度)
scrollTop：距离顶部已卷曲的高度
scrollLeft：距离左侧已卷曲的宽度

一般使用scroll就是获取页面卷曲的高度或宽度；这个时候需要注意获取页面的元素document.documentElement或者document.body（兼容IE7以下）

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →