jQuery：控制元素大小

.width() .height()

.width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

.height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$(window).height()	获取 window 高度
$(document).height()	获取 document 高度
$("body").height()	获取 body 高度
$("element").height()	获取普通元素的高度
$("element").height(500)	设置普通元素的高度

.innerWidth() .innerHeight()

.innerWidth() 方法设置或返回元素的宽度（包括内边距）。

.innerHeight() 方法设置或返回元素的高度（包括内边距）。

.outerWidth() .outerHeight()

.outerWidth() 方法设置或返回元素的宽度（包括内边距和边框）。

.outerHeight() 方法设置或返回元素的高度（包括内边距和边框）。

.outerWidth(true) .outerHeight(true)

.outerWidth() 方法设置或返回元素的宽度（包括内边距、边框和外边距）。

.outerHeight() 方法设置或返回元素的高度（包括内边距、边框和外边距）。

最初效果
最终效果
HTML 代码
jQuery 代码

<input type="button" name="bn01" value="window.height()" />
<input type="button" name="bn02" value="document.height()" />
<input type="button" name="bn03" value="body.height()" />

$("input[name=bn01]").click(function(){alert($(window).height());});
$("input[name=bn02]").click(function(){alert($(document).height());});
$("input[name=bn03]").click(function(){alert($("body").height());});

注意：点击 body.height() 时对话框显示为 0，这是因为本网页css样式特殊设置： body{ height:auto ;···}

最初效果
最终效果
HTML 代码
jQuery 代码

测试段落，从此开始，上下外边距为 25px，上下内边距为 25px。

测试段落，从此开始，上下外边距为 25px，上下内边距为 25px。

<input type="button" name="bn04" value="reset" />
<input type="button" name="bn05" value="div.height(150)" />
<input type="button" name="bn06" value="div.height(200)" />
<input type="button" name="bn07" value="div.height()" />
<input type="button" name="bn08" value="div.innerHeight()" />
<input type="button" name="bn09" value="div.outerHeight()" />
<input type="button" name="bn10" value="div.outerHeight(true)" />
<div><p> 测试段落，从此开始，上下外边距为 25px，上下内边距为 25px。 </p></div>

<div> CSS：

width:600px; height:100px; margin:25px 0; padding:25px 0;

background:#e0edf5; border:1px solid #666;

$("input[name=bn04]").click(function(){$("div").height(150);});
$("input[name=bn05]").click(function(){$("div").height(200);});
$("input[name=bn06]").click(function(){$("div").height(250);});
$("input[name=bn07]").click(function(){alert($("div").height());});
$("input[name=bn08]").click(function(){alert($("div").innerHeight());});
$("input[name=bn09]").click(function(){alert($("div").outerHeight());});
$("input[name=bn10]").click(function(){alert($("div").outerHeight(true));});