jQuery.outerWidth() 函数详解

outerWidth()函数用于设置或返回当前匹配元素的外宽度。

外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下图：

如果你要获取其它情况的宽度，请使用width()和innerWidth()，

---

 

在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、outerHeight()。

与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、outerWidth()。

在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。

下面我们以元素element的盒模型为例来介绍它们之间的区别。

 

 

 

函数	高度范围	jQuery版本	支持写操作
height()	height	1.0+	1.0+
innerHeight()	height + padding	1.2.6+	1.8.0+
outerHeight()	height + padding + border	1.2.6+	否
outerHeight(true)	height+padding+border+margin	1.2.6+	否

 

 

 

 

 

1、 只有height()函数可用于window或document对象。
2、 "支持写操作"表示该函数可以为元素设置高度值。
3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。
4、 1.8.0+ innerHeight()支持参数为数值或函数。

 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标



event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标 

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 

 

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border