jQuery 提供多个处理尺寸的重要方法:
width()设置或返回元素的宽度(不包括内边距、边框或外边距)。
height()设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()返回元素的宽度(包括内边距)。
innerHeight()返回元素的高度(包括内边距)。
outerWidth()返回元素的宽度(包括内边距和边框)。
outerHeight()返回元素的高度(包括内边距和边框)。
outerWidth(true)返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)返回元素的高度(包括内边距、边框和外边距)。
依照盒模型如下图:
[img]http://dl2.iteye.com/upload/attachment/0105/4511/f25894e2-0e32-3116-a890-c8919c9bc4fb.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0105/4518/40be8d51-15c0-3a95-a3b5-e5d13cff17dc.jpg[/img]
width()设置或返回元素的宽度(不包括内边距、边框或外边距)。
height()设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()返回元素的宽度(包括内边距)。
innerHeight()返回元素的高度(包括内边距)。
outerWidth()返回元素的宽度(包括内边距和边框)。
outerHeight()返回元素的高度(包括内边距和边框)。
outerWidth(true)返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)返回元素的高度(包括内边距、边框和外边距)。
依照盒模型如下图:
[img]http://dl2.iteye.com/upload/attachment/0105/4511/f25894e2-0e32-3116-a890-c8919c9bc4fb.jpg[/img]
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "px</br>";
txt+="Height: " + $("#div1").height() + "px</br>";
txt+="Inner width: " + $("#div1").innerWidth() + "px</br>";
txt+="Inner height: " + $("#div1").innerHeight()+ "px</br>";
txt+="Outer width: " + $("#div1").outerWidth() + "px</br>";
txt+="Outer height: " + $("#div1").outerHeight()+ "px</br>";
txt+="Outer width(含margin): " + $("#div1").outerWidth(true) + "px</br>";
txt+="Outer height(含margin): " + $("#div1").outerHeight(true)+"px";
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<button>显示 div 的尺寸</button>
</body>
[img]http://dl2.iteye.com/upload/attachment/0105/4518/40be8d51-15c0-3a95-a3b5-e5d13cff17dc.jpg[/img]