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

本文主要是介绍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。

这篇关于jquery 元素尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight()的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---