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

秒速五厘米 2023-10-16 19:06 32阅读 0赞

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

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

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

[![20130309009][]][20130309009]

jQuery width()和height()方法

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  var txt="";
3.  txt+="Width: " \+ $("\#div1").width() + "</br>";
4.  txt+="Height: " \+ $("\#div1").height();
5.  $("\#div1").html(txt);
6.  \});

$("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\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  $("\#div1").width(500).height(500);
3.  \});

[20130309009]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309009.png
[view plain]: http://blog.csdn.net/mapdigit/article/details/8682758#