标签：padding scrollWidth right offsetWidth clientWidth border left

了解 offsetWidth clientWidth scrollWidth 的区别

最近需要清除区分开元素的width，height及相应的坐标等，当前这篇用来区分offsetWidth clientWidth scrollWidth的区别

各自的概念

假设有一个元素，width有以下几个进行组合

• content
• padding-left
• padding-right
• scrollbar 垂直的滚动条宽度（假设有，没有便为0）
• border-left
• border-right

clientWidth = content + padding-left + padding-right

offsetWidth = content + padding-left + padding-right + border-left + border-right + scrollbar

scrollWidth = content + padding-left + padding-right + scrollbar + border-left + border-right +滚动进入不可见的内容

示例

在上述中，我们可以计算出 scrollbar 为

const scrollbar = el.offsetWidth - (border-left + border-right) - clientWidth

html

<section class="client-xyz">
    <p>我是很长很长的内容我是很长很长的内容我是很长很长的内容我是很长很长的内容我是很长很长的内容我是很长很长的内容</p>
</section>

css

p {
    margin: 20px;
    padding: 20px;
    /* border: 30px solid #333; */
    /* border: 10vw solid #333; */
    /* border: calc(100px - 70px) solid #333; */
    border: 30px solid #333;
    word-break: keep-all;
    overflow-y: scroll;
}

js

const Box = document.querySelector('p')

let border = 0
// 获取元素的style信息
const style = window.getComputedStyle(Box, null)
// border不管设置的单位如何，最终都会转为 px 
border = parseFloat(style['borderRightWidth'].replace('px', '')) + parseFloat(style['borderLeftWidth'].replace('px', ''))

const scollbar = Box.offsetWidth - Box.clientWidth - border

总结

• 知道了计算滚动条宽度，并不是简单的 el.offsetWidth - el.clientWidth 而是还需要减去border的宽度
• clientWidth,offsetWidth,scrollWidth

标签：padding,scrollWidth,right,offsetWidth,clientWidth,border,left
来源： https://www.cnblogs.com/sinosaurus/p/11080084.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。