jQuery outerHeight() 方法

jQuery HTML/CSS 方法

outsideHeight()方法获取或设置所选元素的外部高度（包括padding，border）。

outsideHeight(true)方法获取或设置所选元素的外部高度（包括padding，border和margin）。

当使用externalHeight()方法获取高度时，它将返回第一个选定元素的高度。

当使用externalHeight()方法设置高度时，它将设置所有选定元素的高度。

如下图所示，externalHeight()方法包括padding和border：

要包括margin，请使用outerHeight（true）。

语法：

获取外部高度：

$(selector).outerHeight()

获取包括边距在内的外部高度：

$(selector).outerHeight(true)

设置外部高度：

$(selector).outerHeight(value)

示例

获取DIV元素的外部高度：

$("div").click(function(){
  $(this).outerHeight();
});

获取DIV元素的外部高度（包括边距）：

$("div").click(function(){
  $(this).outerHeight(true);
});

设置所有段落的外部高度：

$("button").click(function(){
  $("p").outerHeight(100);
});

使用不同的单位设置所有段落的外部高度：

$("#btn1").click(function(){
  $("p").outerHeight(100);
});
$("#btn2").click(function(){
  $("p").outerHeight("7em");
});
$("#btn3").click(function(){
  $("p").outerHeight("100vh");
});

显示width()，height()，innerHeight()，innerWidth()，outerWidth()和outerHeight()之间的差异：

$("button").click(function(){
  $("div").width();
  $("div").innerWidth();
  $("div").outerWidth();
  $("div").height();
  $("div").innerHeight();
  $("div").outerHeight();
});

参数值

jQuery HTML/CSS 方法