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来获取图片的原始大小。