jQuery outerHeight() 方法

jQuery HTML/CSS 方法

outsideHeight()方法獲取或設(shè)置所選元素的外部高度（包括padding，border）。

outsideHeight(true)方法獲取或設(shè)置所選元素的外部高度（包括padding，border和margin）。

當(dāng)使用externalHeight()方法獲取高度時(shí)，它將返回第一個(gè)選定元素的高度。

當(dāng)使用externalHeight()方法設(shè)置高度時(shí)，它將設(shè)置所有選定元素的高度。

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

要包括margin，請(qǐng)使用outerHeight（true）。

語(yǔ)法：

獲取外部高度：

$(selector).outerHeight()

獲取包括邊距在內(nèi)的外部高度：

$(selector).outerHeight(true)

設(shè)置外部高度：

$(selector).outerHeight(value)

示例

獲取DIV元素的外部高度：

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

獲取DIV元素的外部高度（包括邊距）：

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

設(shè)置所有段落的外部高度：

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

使用不同的單位設(shè)置所有段落的外部高度：

$("#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();
});

參數(shù)值

jQuery HTML/CSS 方法