> Jquery学习教程 > jQuery 入门教程(18): 操作HTML元素的大小

jquery 提供下面方法来控制HTML元素的大小:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

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

jQuery 入门教程(18): 操作HTML元素的大小

jQuery width()和height()方法

width()用来设置或取得元素的宽度,height()设置和取得元素的高度。

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

$("button").click(function(){
   var txt="";
   txt+="Width: " + $("#div1").width() + "</br>";
   txt+="Height: " + $("#div1").height();
   $("#div1").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(){
   $("#div1").width(500).height(500);
 });