jquery 元素尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight()

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

看了上面一堆的参数，肯定一下子无法很好得去理解。下面写一个div来帮助理解。

width()、height() 获取元素width和height

从上面的示例可以看到，使用​​width()​​​和​​height()​​​分别可以获取元素div的​​width​​​和​​height​​的值。

innerWidth()、innerHeight() 包括padding的width和height

可以看出，只要设置了​​padding​​​相关的距离，那么​​innerWidth()​​​就会得到​​width​​​加上​​padding-left​​的距离。

其实​​innerWidth()​​​ = ​​padding-left​​​ + ​​width​​​ + ​​padding-right​​，下面来看看。

同理，​​innerHeight()​​​ = ​​padding-top​​​ + ​​height​​​ + ​​padding-bottom​​，如下：

outerWidth()、outerHeight() 包括padding和border的width和height

这个加上border的话，那么就是加多 ​​1px​​，下面打印看看，如下：

因为​​border​​​有​​border-left​​​、​​border-right​​​、​​border-top​​​、​​border-bottom​​​，所以计算公式如下：
​​​outerWidth()​​​ = ​​border-left​​​ + ​​padding-left​​​ + ​​width​​​ + ​​padding-right​​​ + ​​border-right​​​​outerHeight()​​ = ​​border-top​​ + ​​padding-top​​ + ​​height​​ + ​​padding-bottom​​ + ​​boder=bottom​​

outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

最后的这个其实就是最后还要加上​​margin​​​的相关距离。
演示如下：

2、获取元素相对页面的绝对位置

offset()

单纯看字面意思也不知道这什么叫做绝对位置，淡定写一个示例才是正经。如下：

可以从图中看出，这个绝对位置就是以div的左上角偏移量的​​top​​​和​​left​​。