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