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);
- });
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);
- });