【前端工程师手册】前端应该知道的各种宽高

Hujiawei 发布于2019-08-30 15:54 / 1570人阅读

摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性

引子

曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来参加面试...

好汉不提当年囧，今天总结一下常见的元素各种宽高。

一些height和width clientHeight和clientWidth

没有横向滚动条时：clientHeight = css设置的height + paddingTop + paddingBottom

有横向滚动条时：clientHeight = css设置的height + paddingTop + paddingBottom - 滚动条的高度

clientWidth类似，就不再赘述

ps：这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0

offsetHeight和offsetWidth

offsetHeight = ccss设置的height + paddingTop + paddingBottom + borderTop + borderBottom

offsetWidth类似，就不再赘述

scrollHeight和scrollWidth

无滚动条时：scrollHeight = clientHeight = css设置的height + paddingTop + paddingBottom

有滚动条时：scrollHeight = 实际内容的高度 + paddingTop + paddingBottom（即要算上因为滚动被遮住的内容高度

scrollWidth不再赘述

一些Top和Left clientLeft和clientTop

clientTop = borderTop
clientLeft = borderLeft

offsetLeft和offsetTop

以offsetTop为例，搞懂它首先要明白offsetParent是什么

offsetParent是元素最近的有定位的父元素，如果父元素中没有有定位的，那么就是最近的 table, table cell 或根元素。

offsetTop 和 offsetLeft 都是相对于offsetParent内边距边界的。

scrollTop和scrollLeft

scrollTop即为向上滚动时，元素内容区被遮住的那一部分。

scrollLeft同理

参考

JavaScript 中的各种宽高属性

MDN

GPU云服务器云服务器优秀的前端工程师好的前端工程师 web前端工程师的发展 web前端工程师的要求

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

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

【前端工程师手册】前端应该知道的各种宽高

摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性引子曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...

jayce 2019-08-22 18:45 评论0 收藏0
前端每周清单半年盘点之 CSS 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...

RaoMeng 2019-08-29 13:21 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
【前端工程师手册】学习回流和重绘（reflow和repaint）

摘要：重绘元素做了一些不影响排版的改变，比如背景色下划线等等，只需要重新绘制的过程，叫做重绘。显然回流带来的代价大于重绘，因为重绘仅仅是重新画一遍元素而已，但是重绘是重新计算重新画。不然这会导致大量地读写这个结点的属性。浏览器的大概工作流程以普通的HTML页面为例：解析HTML文档，生成dom树解析css产生css规则树解析JavaScript，通过DOM-API来操作dom树和...

liuyix 2019-08-29 16:12 评论0 收藏0