资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/容易混淆的client-*,scroll-*,offset-*

容易混淆的client-*,scroll-*,offset-*

Jokcy / 1907人阅读

摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。

容易混淆client-*,scroll-*,offset-*

Truth comes from practice

上来不说话，先抛出几个问题：

offsetWidth offsetHeight offsetLeft offsetTop
clientWidth clientHeight clientLeft clientTop
scrollWidth scrollHeight scrollLeft scrollTop

是时候谈谈它们之间的区别了，是不是已经混乱了？好吧，一步一步来搞清楚这些东西是啥。

终于下决心来补上这个坑，俗话说的话：纸上得来终觉浅，绝知此事要躬行。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。

offset offsetWidth & offsetHeight

任何HTML元素的只读属性offsetWidth和offsetHeight已CSS像素返回它的屏幕尺寸，返回的尺寸包干元素的边框和内边距（width/height + border + padding），和滚动条。

offsetLeft & offsetTop

所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标

相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素

一般元素，则是相对于文档，返回的是文档坐标

offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标

</>复制代码 
  1. //用offsetLeft和offsetTop来计算e的位置
  2. function getElementPosition(e){
  3.     var x = 0,y = 0;
  4.     while(e != null) {
  5.         x += e.offsetLeft;
  6.         y += e.offsetTop;
  7.         e = e.offsetParent;
  8.     }
  9.     return {
  10.         x : x,
  11.         y : y
  12.     };
  13. }
client

client是一种间接指代，它就是web浏览器客户端，专指它定义的窗口或视口。

clientWidth & clientHeight

clientWidth和clientHeight类似于offsetWidth和offsetHeight，不同的是不包含边框大小（width/height + padding）。同时在有滚动条的情况下，clientWidth和clientHeight在其返回值中也不包含滚动条。

对于类似、、等内联元素，总是返回0

clientLeft & clientTop

返回元素的内边距的外边缘和他的边框的外边缘的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。

在有滚动条时，并且浏览器将这些滚动条放置在左侧或顶部（反正我是没见过），clientLEft和clientTop就包含这些滚动条的宽度。

scroll scrollWidth & scrollHeight

这两个属性是元素的内容区域加上内边距，在加上任何溢出内容的尺寸.

因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。

width和height计算实例

在这个实例中，我们观察#inner实例，看看该元素各个属性之间的关系

</>复制代码 
  2.     
  3.     Document
  4.     
  5.     
  6.         
  7.             
  8.         
  9.     

</>复制代码 
  1. var inner = document.getElementById("inner");
  2. var content = document.getElementById("content");
  3. //辅助变量，获取元素的宽和高
  4. var style = getComputedStyle(inner);
  5. //width & height
  6. console.log("width= "+style.width);// ""
  7. console.log("height= " + style.height);// ""
  8. //padding
  9. console.log("paddingt-top="+style.paddingTop);
  10. console.log("paddingt-bottom= "+style.paddingBottom);
  11. console.log("paddingt-left= "+style.paddingLeft);
  12. console.log("paddingt-right= "+style.paddingRight);
  13. //border
  14. console.log("border-top-width= "+style.borderTopWidth);
  15. console.log("border-bottom-width= "+style.borderBottomWidth);
  16. console.log("border-left-width= "+style.borderLeftWidth);
  17. console.log("border-right-width= "+style.borderRightWidth);
  18. //offsetWidth & offsetWidth
  19. console.log("offsetWidth= "+inner.offsetWidth);
  20. console.log("offsetHeight= "+inner.offsetHeight);
  21. //clientWidth & clientHeight
  22. console.log("clientWidth= "+inner.clientWidth);
  23. console.log("clientHeight= "+inner.clientHeight);
  24. // scrollWidth & scrollHeight
  25. console.log("scrollWidth= "+inner.scrollWidth);
  26. console.log("scrollHeight= "+inner.scrollHeight);
  27. // #content.offsetHeight
  28. console.log("#content.offsetHeight= "+content.offsetHeight);

由于元素是外链的样式，没有设置style，因此如果直接使用inner.style.width返回的是空。必须使用getComputedStyle(el)来获取元素的宽和高

说明：

宽度

width：本来应该是300，但是由于存在滚动条（在水平方向占据了空间），因此

</>复制代码 
  1. `原本内容区宽度（width） - 滚动条宽度 = 300 - 17 = 283`

offsetWidth：元素实际所占空间，滚动条也是元素占据的空间，因此

</>复制代码 
  1. `width + 滚动条 + padding + border = 300 + 100 + 100 + 20 + 20 = 540`

clientWidth：除去边框占据的空间，且不包含滚动条

</>复制代码 
  1. `width + padding = 283 + 100 + 100 = 483`

scrollWidth：由于水平方向没有溢出，因此

</>复制代码 
  1. `clientWidth + 溢出部分 = 483 + 0 = 483`

高度

height：由于垂直方向没有滚动条占据空间，因此

</>复制代码 
  1. `原本内容区高度（height）- 滚动条高度 = 200 - 0 = 200`

offsetHeight：元素实际所占空间，由于采取了滚动的方式处理了溢出的部分，因此

</>复制代码 
  1. `height + padding + border = 200 + 100 + 100 + 20 + 20 = 440`

clientHeight：

</>复制代码 
  1. `height + padding = 200 + 100 + 100 = 400`

scollHeight：客户区高度，加上溢出的部分，即包含元素真实高度-内容区的高度

</>复制代码 
  1. `height+padding+(#content.offsetHeight-height)=200+100+100+802-200=1002`

left和top实例

html结构与上一个实例一直。这样可以

</>复制代码 
  2.     
  3.     Document
  4.     
  5.     
  6.         
  7.             
  8.         
  9.

分别获取属性

</>复制代码 
  1. var inner = document.getElementById("inner");
  2. //offsetLeft & offsetTop
  3. console.log("offsetLeft= "+inner.offsetLeft);
  4. console.log("offsetTop= "+inner.offsetTop);
  5. //clientLeft &  clientTop
  6. console.log("clientLeft= "+inner.clientLeft);
  7. console.log("clientTop= "+inner.clientTop);
  8. // scrollLeft & scrollTop
  9. console.log("scrollLeft= "+inner.scrollLeft);
  10. console.log("scrollTop= "+inner.scrollTop);
  11. //让文档滚动
  12. inner.scrollTop = 30;
  13. //为了计算的方便
  14. var style = getComputedStyle(inner);

结果如图

分析：

(#wrap为参照原点，设置了position:relative)

offsetLeft：即元素的x坐标，(#inner设置了自动居中)

</>复制代码 
  1. `offsetLeft = (#wrap.width - #inner.offsetWidth)/2 =30`

offsetTop：即元素的y坐标，（style是#inner元素的计算后的样式）

</>复制代码 
  1. `offsetTop = style.marginTop = 50`

clientLeft 即 border-left-width

</>复制代码 
  1. `clientLeft = style.borderLeftWidth = 20`

clientTop 即 border-top-width

</>复制代码 
  1. `clientTop = style.borderTopWidth = 20`

scrollLeft 由于水平方向没有滚动条，因此为0

scrollTop 即滚动条离#inner border-top内侧的位置，一开始为0

总结

大部分人看完的当时是知道的，过些日子可能又忘。我觉得是这几个概念的名字取得不好，不太容易让人望文生义。说了那么多，不点个收藏以往日后回忆吗？（世上竟有如此厚颜无耻之人，哈哈^_^#）

云服务器 GPU云服务器 容易混淆的问题 webrtc的视频容易崩溃 最容易实现的替换算法 阿里云服务器容易出现的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79934.html

相关文章

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...

    tolerious 评论0 收藏0

  • JS 中的offset、scroll、client总结

    摘要：两张图镇楼，随时翻阅指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条，不包括隐藏的部分属性返回一个对象的引用，这个对象是距离调用的父级元素中最近的在包含层次中最靠近的，并且是已进行过定位的容器元素。 经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。 两张图镇楼，随时翻阅 showImg(https://segmentfault.c...

    The question 评论0 收藏0

  • JS 中的offset、scroll、client总结

    摘要：两张图镇楼，随时翻阅指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条，不包括隐藏的部分属性返回一个对象的引用，这个对象是距离调用的父级元素中最近的在包含层次中最靠近的，并且是已进行过定位的容器元素。 经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。 两张图镇楼，随时翻阅 showImg(https://segmentfault.c...

    jerryloveemily 评论0 收藏0

  • JS宽高（client、offset、scroll）的介绍

    摘要：问题今日头条的一道笔试题，的区别。结果如图更详细的介绍，请点击 问题 今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。 分析 JS中document对象的宽高有三种，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

    mj 评论0 收藏0

  • 关于scroll,client,innear,avail,offset等的理解

    摘要：在写实例理解，，，及等的时候，意外的又发现了值合并的问题，在这里同时记录下偏移量的区别文件自己写的示例样式较多见的属性指可见区的宽度网页，或者元素指可见区的高度网页，或者元素指元素的宽度网页，或者元素指元素的高度网页，或者元素滚动条的 在写实例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的时候，意外的又发现了...

    Yangder 评论0 收藏0

发表评论

登陆后可评论

0条评论

Jokcy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2025 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<