jquery outerwidth jQuery outerHeight() 方法

jquery outerwidth

jQuery outerWidth() 方法用于获取元素的宽度，包括元素的 padding 和 border，但不包括 margin。

// 获取元素的宽度（包括 padding 和 border）
$(selector).outerWidth(); 

outerWidth() 方法返回一个数值，表示元素的宽度（以像素为单位）。如果未传递参数，则返回当前计算样式中的宽度值。如果传递了布尔值 true ，则返回元素在内容、padding 和 border 之外所占用的宽度。

// 获取元素在内容、padding 和 border 之外所占用的宽度 
$(selector).outerWidth(true); 

outerWidth() 方法也可以传递一个数字作为参数来设置元素的新宽度。此时该方法将返回 undefined ：

 // 设置元素新的宽度 
 $(selector).outerWidth(500);  // 返回 undefined  
 

需要注意的是 outerWidth() 方法不能用于 window 对象或 document 对象。如果要获取浏览器可视区域大小，请使用 $(window).width() 或 $(document).width() 来代替。

jQuery outerHeight() 方法

jQuery outerHeight() 方法

jQuery HTML/CSS 方法

实例

返回 <div> 元素的外部高度：

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

---

定义和用法

outerHeight() 方法返回第一个匹配元素的外部高度。

如下面的图像所示，该方法包含 padding 和 border。

提示：如需包含 margin，请使用 outerHeight(true)。

---

相关方法：

• width() - 设置或返回元素的宽度
• height() - 设置或返回元素的高度
• innerWidth() - 返回元素的宽度（包含 padding）
• innerHeight() - 返回元素的高度（包含 padding）
• outerWidth() - 返回元素的宽度（包含 padding 和 border）

---

语法

$(selector).outerHeight(includeMargin)

参数	描述
includeMargin	可选。布尔值，规定是否包含 margin。 false - 默认。不包含 margin。 true - 包含 margin。

---

更多实例

包含 margin
规定是否包含 margin。

通过相关方法显示尺寸
如何使用 width()、height()、innerHeight()、innerWidth()、outerWidth() 和 outerHeight()。

---

jQuery HTML/CSS 方法