首页 / 脚本样式 / jQuery / jQuery入门（18） 操作HTML元素的大小

jQuery入门（18） 操作HTML元素的大小2013-05-22jQuery 提供下面方法来控制HTML元素的大小：

width（）

height（）

innerWidth（）

innerHeight（）

outerWidth（）

outerHeight（）

一般影响HTML元素 大小各部分的示意图如下所示：

jQuery width（）和height（）方法

width（）用来设置或取得元素的宽度，height（）设置和取得元素的高度。

下面代码取得<center>元素的高度和宽度。

$（"button"）.click（function（）{var txt="";txt+="Width: " + $（"#center1"）.width（） + "</br>";txt+="Height: " + $（"#center1"）.height（）;$（"#center1"）.html（txt）;}）;

jQuery的innerWidth（）和innerHeight（）方法
innerWidth（） 返回元素包括Padding的宽度，innerHeight（）返回包括Padding的高度。

jquery的outerWidth（）和 outerHeight（）方法
outerWidth（）返回包括 padding 和 border的宽度，outerHeight（）返回包括padding 和 border的高度。

而outWidth（true）和 outHeight（true） 返回包括padding, border和margin的高度和宽度。

下面的例子设置指定

元素的宽度和高度：

$（"button"）.click（function（）{$（"#center1"）.width（500）.height（500）;}）;