分享下offsetLeft和clientLeft和scrollLeft区别的总结

在做前端的时候很多时间都会用到offset,clientLeft,scrollLeft…类似这样的属性，他们到底有什么区别呢？他们分别是指哪里呢？我们一起来分析分析。
1.offsetWidth,offsetHeight,offsetLeft,offsetTop

如上图所示，
offsetWidth(对象的可见宽度，包括滚动条等边线)=content+padding+border
offsetHeight(对象的可见高度)=content+padding+border
offsetWidth(相对父元素的偏移宽度)=返回元素上边框到有定位父级元素的上边框的距离。（如果找不到有定位的父级，那么距离就是它的上边框到body的距离。）
offsetHeight(相对父元素的偏移高度)=返回元素左边框到有定位父级元素的左边框的距离。（如果找不到有定位的父级，那么距离就是它的左边框到body的距离。）
2.clientWidth,clientHeight,clientTop, clientLeft
client是当前元素内容和内边距占据空间的大小，不包括边框border
clientWidth：返回元素的宽度（content+padding）
clientHeight：返回元素的高度（content+padding）
clientTop：返回元素上边框大小(boder-top大小)
clientLeft：返回元素左边框大小(border-left大小)
3.scrollWidth， scrollHeight， scrollTop， scrollLeft
scrollWidth：返回元素的总宽度，包含由于溢出而无法在网页上显示的不可见部分。（不包括边框和外边距）
scrollHeight：返回元素的总高度，包含由于溢出而无法在网页上显示的不可见部分。（不包括边框和外边距）
（如果没有溢出，那么和clientWidth/clientHeight情况相同。）
scrollTop：元素被卷起的高度。
scrollLeft：元素被卷起的宽度。
可通过如下图理解：

分享下offsetLeft和clientLeft和scrollLeft区别的总结相关推荐

JS中的offsetLeft和clientLeft和scrollLeft的一些区别
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
clienttop,clientleft,scrolltop,scrollleft,offsettop,offsetleft全解析
一张图网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body. ...
offsetLeft,Left,clientLeft的区别
offsetLeft,Left,clientLeft的区别假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...
关于JS下offsetLeft，style.left，以及jquery中的offset().left，css(left)的区别。
最近因为工作需要,仔细研究了一下关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别. JS下的off ...
offsetLeft,Left,clientLeft详解
背景最近写了一个滑动条,发现自己的对offsetLeft,Left,clientLeft这几个的概念还不是很清楚,于是决定细细研究下. 分类 client部分 clientHeight:内容可视区域 ...
php实训报告英文摘要,English Abstract _和大家分享下如何写英文摘要
English Abstract _和大家分享下如何写英文摘要刚刚在网上看到这样的好文章,所以想和大家分享下如何写英文摘要 Abstract 1 基本特性 2 时态 3 语态 4 语法修辞 5 一个 ...
微淼商学院php面试_分享下我在5，6月份求职的面经(php)
汇总最近一两个月,我分别参加了力拓飞远,最右app,轻松筹,大搜车,360,立思辰,微淼商学院,滴滴,百度,字节跳动,理想汽车的在线/电话面试,拒绝了小熊美家,小叶子TheOne,作业帮,世纪佳缘的 ...
微淼商学院php面试_分享下我在5，6月份求职的面经
汇总最近一两个月,我分别参加了力拓飞远,最右app,轻松筹,大搜车,360,立思辰,微淼商学院,滴滴,百度,字节跳动,理想汽车的在线/电话面试,拒绝了小熊美家,小叶子TheOne,作业帮,世纪佳缘的 ...
分享下我在5，6月份求职的面经（php后端）
汇总最近一两个月,我分别参加了力拓飞远,最右app,轻松筹,大搜车,360,立思辰,微淼商学院,滴滴,百度,字节跳动,理想汽车的在线/电话面试,拒绝了小熊美家,小叶子TheOne,作业帮,世纪佳缘的 ...

分享下offsetLeft和clientLeft和scrollLeft区别的总结

分享下offsetLeft和clientLeft和scrollLeft区别的总结相关推荐

最新文章

热门文章