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

  • width()

  • height()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • outerHeight()

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

20130309009

jQuery width()和height()方法

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

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


  1. $("button").click(function(){  

  2.   var txt="";  

  3.   txt+="Width: " + $("#div1").width() + "</br>";  

  4.   txt+="Height: " + $("#div1").height();  

  5.   $("#div1").html(txt);  

  6. });  


jQuery的innerWidth()和innerHeight()方法
innerWidth() 返回元素包括Padding的宽度,innerHeight()返回包括Padding的高度。

jquery的outerWidth()和 outerHeight()方法
outerWidth()返回包括 padding 和 border的宽度,outerHeight()返回包括padding 和 border的高度。

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

下面的例子设置指定

元素的宽度和高度:

  1. $("button").click(function(){  

  2.   $("#div1").width(500).height(500);  

  3. });