JS获取盒子定位或宽高的方法，你知道几个？
目录
一、我知道的有以下这些
二、scrollWidth、scrollHeight、scrollTop、scrollLeft
1、scrollWidth、scrollHeight（仅可读）
2、scrollTop、scrollLeft（可读可写）
三、clientWidth、clientHeight、clientTop、clientLeft
3、clientWidth、clientHeight（仅可读）
4、clientTop、clientLeft
四、offsetWidth、offsetHeight、offsetTop、offsetLeft
1、offsetWidth、offsetHeight
2、offsetTop、offsetLeft
五、innerWidth、innerHeight
六、outerWidth、outerHeight
七、naturalWidth、naturalHeight
一、我知道的有以下这些
1、scrollWidth、scrollHeight、scrollTop、scrollLeft
2、clientWidth、clientHeight、clientTop、clientLeft
3、offsetWidth、offsetHeight、offsetTop、offsetLeft
4、 innerWidth、innerHeight
5、outerWidth、outerHeight
6、naturalWidth、naturalHeight
二、scrollWidth、scrollHeight、scrollTop、scrollLeft
1、scrollWidth、scrollHeight（仅可读）
<1>当文字内容未超出盒子大小时
scrollWidth=盒子的宽+padding值
scrollHeight=盒子的高+padding值
<2>当文字溢出盒子的时候
scrollWidth=文字内容的宽度+padding值
scrollHeight=文字内容高度+padding值
<3>当有滚动条的时候
scrollWidth=文本宽/盒子宽+padding值-纵向滚动条的宽
scrollHeight=文本宽/盒子宽+padding值-横向滚动条的宽
2、scrollTop、scrollLeft（可读可写）
<1>含义
scrollTop:隐藏在盒子顶上的文字高度；
scrollLeft:隐藏在盒子左边的文字宽度；
<2>如何计算
scrollTop=文本总高度-盒子高度-横向滚动条宽
scrollLeft=文本总宽-盒子宽度-纵向滚动条宽
三、clientWidth、clientHeight、clientTop、clientLeft
3、clientWidth、clientHeight（仅可读）
<1>没滚动条
clientWidth=盒子宽+padding值
clientHeight=盒子高度+padding值
<2>有滚动条
clientWidth=盒子宽+padding值-纵向滚动条宽
clientHeight=盒子高度+padding值-横向滚动条
4、clientTop、clientLeft
简而言之，就是border值
clientTop=border-top值
clientLeft=border-left值
四、offsetWidth、offsetHeight、offsetTop、offsetLeft
1、offsetWidth、offsetHeight
<1>没有滚动条
offsetWidth=盒子宽+padding值+border值
offsetHeight=盒子高+padding值+border值
<2>有滚动条
offsetWidth=盒子宽+padding值+border值+纵向滚动条宽
offsetHeight=盒子高+padding值+border值+横向滚动条宽
2、offsetTop、offsetLeft
<1>该盒子有position样式时，逐级向上查找父盒子元素，即有除了fixed、static定位的父盒子元素
offsetTop=该盒子顶部到父盒子底部的距离（border以外的距离）
offsetLeft=该盒子左边缘到父盒子的右边缘的距离（border以外）
<2>无position定位，body就是它的父盒子
五、innerWidth、innerHeight
<1>window.innerWidth、windowHeight
获取浏览器的可视宽高，不包括工具栏、菜单栏、滚动条
<2>jQuery获取innerWidth、innerHeight
innerWidth=盒子宽+padding值
innerHeight=盒子高+padding值
六、outerWidth、outerHeight
<1>window.outerWidth、window.outerHeight
获得浏览的可是宽高，包含工具栏、菜单栏、滚动条
<2>jQuery获取outerWidth、outerHeight
outerWidth=盒子宽+padding值+border值+滚动条宽
outerHeight=盒子高+padding值+border值+滚动条宽
<3>加参数true，还包含margin值
$(div).outerWidth(true)=盒子宽+padding值+border值+margin值+滚动条宽
$(div).outerHeight(true)=盒子高+padding值+border值+margin值+滚动条宽
七、naturalWidth、naturalHeight
<1>应用场景：
一般情况下，在盒子中放入图片，会给其宽高，压缩或放大图片，用以上六种的方法无法获取图片的原始大小。这个时候就可以用naturalWiidth、naturalHeight来获取图片的原始大小。