操作HTML元素的大小

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

 

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

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

 

 

 

 

jQuery width()和height()方法

 

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

 

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

 

[javascript]  

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

   var txt="";  

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

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

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

 });  

 

$("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的高度和宽度。

 

下面的例子设置指定 

 

元素的宽度和高度：

[javascript]  

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

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

 });  

 

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

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

 });