jquery获取元素高度
获取元素高度的方法
使用jQuery获取元素高度有多种方式,具体取决于需求(如是否包含内边距、外边距或边框)。以下是常见方法:
获取内容高度(不包含内边距、边框)
使用.height()方法可以获取元素的纯内容高度,单位为像素:
var contentHeight = $('#elementId').height();
获取包含内边距的高度
使用.innerHeight()方法获取内容高度+内边距(padding):
var heightWithPadding = $('#elementId').innerHeight();
获取包含边框的高度
使用.outerHeight()方法获取内容高度+内边距+边框(border)。参数默认为false表示不包含外边距:
var heightWithBorder = $('#elementId').outerHeight();
获取包含外边距的高度
通过.outerHeight(true)参数为true时,计算高度会包含外边距(margin):
var totalHeight = $('#elementId').outerHeight(true);
动态获取窗口或文档高度
获取浏览器视窗高度:
var windowHeight = $(window).height();
获取整个文档的高度:

var documentHeight = $(document).height();
注意事项
- 所有方法返回值为数值类型(单位:像素),无需手动解析
px单位。 - 隐藏元素(
display: none)的高度返回值为0,需先显示元素再获取。 - 方法对CSS盒模型计算一致,无需担心浏览器兼容性问题。






