脚本宝典收集整理的这篇文章主要介绍了js实例教程-JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

首先定义一个p。

然后稍微装修一下

下面开始区分

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1，clientWidth的实际宽度

clientWidth =width+左右padding

2，clientHeigh的实际高度

clientHeigh = height + 上下padding

3，clientTop的实际宽度

clientTop = boder.top(上边框的宽度)

4，clientLeft的实际宽度

clientLeft = boder.left(左边框的宽度)

二、offsetWidth和offsetHight 、offsetTop和offsetLeft

1,offsetWidth的实际宽度

offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的实际高度

offsetHeith = height + 上下padding + 上下boder

3，offsetTop实际宽度

offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父

级都没有定位，则分别是到body 顶部 和左边的距离

4，offsetLeft实际宽度

offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1，scrollWidth实际宽度

scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。

2，scrollHeight的实际高度

scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

3，scrollTop

scrollTop :内容层顶部 到 可视区域顶部的距离。

4，scrollLeft

scrollLeft:内容层左端 到 可视区域左端的距离.

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别介绍全部内容，希望文章能够帮你解决js实例教程-JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。