( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\jQuery\jquery_05.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360024{main}( )...\jquery_05.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\jQuery\jquery_05.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360024{main}( )...\jquery_05.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\jQuery\jquery_05.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360024{main}( )...\jquery_05.php:0

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

显示框架
显示框架
显示框架
显示框架