jQuery如何获取元素外高度？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何获取元素外高度？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 获取元素外高度

简介

"元素外高度"是指包括元素自身高度以及元素外部填充（padding）和边距（margin）在内的总高度。jQuery提供了多种方法来获取元素的外高度。

获取元素外高度的方法

1. outerHeight()

该方法获取元素本身的高度，加上它的外部填充和边距。

$(element).outerHeight();

2. outerHeight([margin])

该方法获取元素本身的高度，加上它外部填充和可选的边距。如果指定 true，则包括边距；如果指定 false，则不包括边距。

$(element).outerHeight(true); // 包括边距
$(element).outerHeight(false); // 不包括边距

3. outerHeight({ margin: true/false })

该方法获取元素本身的高度，加上它外部填充和可配置的边距。

$(element).outerHeight({ margin: true }); // 包括边距
$(element).outerHeight({ margin: false }); // 不包括边距

4. height()

该方法仅获取元素的内部高度，不包括填充或边距。

$(element).height();

样例

以下样例演示了如何使用 jQuery 获取元素外高度：

<div id="element" style="padding: 10px; margin: 5px;">Hello World</div>

// 获取元素外高度，包括填充和边距
var outerHeight = $("#element").outerHeight();

// 获取元素外高度，包括填充，但不包括边距
var outerHeightNoMargin = $("#element").outerHeight(false);

// 获取元素内部高度（不包括填充或边距）
var height = $("#element").height();

console.log("外高度（含填充和边距）：", outerHeight);
console.log("外高度（含填充，不含边距）：", outerHeightNoMargin);
console.log("内部高度：", height);

注意事项