jquery 高度

jQuery 获取和设置元素高度的方法

jQuery 提供了多种方法来获取和设置元素的高度，包括 height()、innerHeight()、outerHeight() 等。以下是详细说明：

获取元素高度

使用 height() 方法可以获取元素的内容高度（不包括 padding、border 和 margin）：

var elementHeight = $('#element').height();

设置元素高度

通过传递参数给 height() 方法可以设置元素的高度：

$('#element').height(200); // 设置为 200px
$('#element').height('50%'); // 设置为父元素的 50%

获取包含内边距的高度

innerHeight() 方法返回元素的高度，包括 padding 但不包括 border 和 margin：

var innerHeight = $('#element').innerHeight();

获取包含边框的高度

outerHeight() 方法返回元素的高度，包括 padding 和 border，但不包括 margin：

var outerHeight = $('#element').outerHeight();

如果需要包含 margin，可以传递 true 作为参数：

var outerHeightWithMargin = $('#element').outerHeight(true);

获取窗口或文档的高度

获取浏览器窗口的高度：

var windowHeight = $(window).height();

获取整个文档的高度：

var documentHeight = $(document).height();

动态调整高度

结合动画效果动态调整高度：

$('#element').animate({
    height: '300px'
}, 1000); // 在 1 秒内高度变为 300px

注意事项

• height() 方法返回的是数值（单位为像素），不包含单位字符串（如 'px'）。
• 设置高度时可以直接传递数值或带有单位的字符串（如 '100px' 或 '50%'）。
• 百分比高度是基于父元素的高度计算的，确保父元素有明确的高度定义。