jQuery 里的一些方法可以获取或者去设置 CSS 属性 .. widh() 可以查看或者设置元素的宽度 … height() 可以查看设置元素的高度 … 还有 outerWidth ，outerHeight … outer 类型的宽度和高度包含元素的宽度和高度还有内边距，外边距，再加上边框 …

另外还有 innerWidth ，和 innerHeight … 内部的宽度和高度 … 也就是元素本身再加上它的内边距 … 不包含边框和外边距 …

这里我们使用 CSS 设置了 .album 类的元素的宽度为 300 像素，内部有一个 5 像素的边距，四调有一个 1 像素的边框 … 打开开发者工具 ..

Elements 选项卡 … 选中这个 .album 类的元素 … 然后在右边窗口里，选择 Computed … 这里有个图示，可以查看这个元素里面的宽度，内边距，外边距，还有边框的宽度 …

打开控制台，我们可以使用一些方法去查看或者设置一下 .album 元素的一些 css 属性 …

看试一下 width() 方法 … 选中这个 .album 元素 … 调用 .width() 方法 .. 不在方法里指定值，这个方法就会去获取元素的宽度值 …

$( '.album' ).width()

返回的结果是 288 .. 也就是元素的宽度 … 加上左右各 5 像素的内边距，2个像素的边框 ..

再试一下 innerWidth() …

$( '.album' ).innerWidth()

结果是 298 … 也就是元素的宽度，加上内边距 … 元素是 288 像素宽 … 加上 10 个像素的内边距 .. 结果就是 298 ..

还有一个 outerWidth …

$( '.album' ).outerWidth()

结果是 300 … 这个宽度是元素的宽度加上内边距的宽度，边框，还有外边距的宽度 …

这些方法在不指定参数值的时候，都是去获取找到的结果里面的第一个元素的宽度或者高度 … 如果在方法里加上一个参数值 … 它们的功能就变成了去设置元素的宽度和高度 …

比如我们要设置一个 .album 元素的 outerWidth .. 设置成 350 …

$( '.album' ).outerWidth( '350' )

现在，它的宽度现在就会变成 350 px ，在返回的结果里面你会发现，在元素上应用了一个 style 属性 … 里面用 width 属性设置了宽度值 …

.height()

下面我们再试试跟高度相关的方法 … 先试一下 .height() …

$( '.album' ).height();

结果是 288 … 这是元素本身的高度 .. 再试试 .innerHeight() .. 也就是加上内边距的高度 …

$( '.album' ).innerHeight();

结果是 298 … 最后还有一个 .outerHeight()

$( '.album' ).outerHeight();

加上元素本身的高度，还有内边距和边框还有外边距 … 整体的高度是 300 像素 …