jQuery outerWidth() 方法

jQuery HTML/CSS 方法

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

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

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

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

如下圖所示，externalWidth()方法包含填充和邊框：

要包括邊距，請(qǐng)使用outerWidth（true）。

語法：

得到外部寬度：

$(selector).outerWidth()

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

$(selector).outerWidth(true)

設(shè)置外部寬度：

$(selector).outerWidth(value)

示例

獲取DIV元素的外部寬度：

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

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

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

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

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

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

$("#btn1").click(function(){
  $("p").outerWidth(100);
});
$("#btn2").click(function(){
  $("p").outerWidth("10em");
});
$("#btn3").click(function(){
  $("p").outerWidth("100vw");
});

顯示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 方法