本文探讨了如何利用javascript的`clientheight`属性和jquery的`height()`方法动态获取html元素的高度。我们将通过具体示例，演示如何将这些技术应用于创建自定义的可滚动容器，使其仅显示特定数量的子元素，从而提升页面布局的灵活性和用户交互体验。
在Web开发中，有时我们需要创建具有特定行为的动态布局，例如一个只显示固定数量列表项的可滚动容器。为了实现这种效果，核心挑战在于如何准确获取单个列表项或其他子元素的高度，并据此动态设置父容器的高度。本教程将详细介绍如何使用纯javaScript和jquery两种方式来解决这一问题。
一、使用javascript动态获取元素高度
JavaScript提供了多种方式来获取元素的尺寸信息。对于获取元素的可视高度（不包括边框和外边距），clientHeight属性是常用的选择。
1. clientHeight 属性
clientHeight属性返回元素内部的高度（以像素为单位），包括内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条的高度。这通常是我们在计算内容区域高度时最需要的值。
示例代码：
立即学习“Java免费学习笔记（深入）”；
假设我们有一个css类名为 list-item 的列表项，我们想获取它的高度。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript获取元素高度</title> <style> .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border: 1px solid #ccc; height: 50px; /* 示例高度 */ } .Scrollable_Wrapper { overflow-x: hidden; overflow-y: scroll; border: 2px solid blue; background-color: #e6f7ff; /* height 将由JavaScript动态设置 */ } </style> </head> <body> <div class="Scrollable_Wrapper"> <div class="list-item">列表项 1</div> <div class="list-item">列表项 2</div> <div class="list-item">列表项 3</div> <div class="list-item">列表项 4</div> <div class="list-item">列表项 5</div> </div> <p>第一个列表项的高度: <span id="itemHeightDisplay"></span>px</p> <p>滚动容器的计算高度: <span id="wrapperHeightDisplay"></span>px</p> <script> // 确保dom内容加载完毕后执行 document.addEventListener('DOMContentLoaded', function() { const firstItem = document.querySelector('.list-item'); const scrollableWrapper = document.querySelector('.Scrollable_Wrapper'); if (firstItem && scrollableWrapper) { // 获取第一个列表项的 clientHeight const itemHeight = firstItem.clientHeight; document.getElementById('itemHeightDisplay').textContent = itemHeight; // 假设我们想让滚动容器显示两个列表项的高度 const wrapperCalculatedHeight = itemHeight * 2; scrollableWrapper.style.height = wrapperCalculatedHeight + 'px'; document.getElementById('wrapperHeightDisplay').textContent = wrapperCalculatedHeight; console.log('第一个列表项的高度 (clientHeight):', itemHeight, 'px'); console.log('滚动容器设置的高度:', wrapperCalculatedHeight, 'px'); } else { console.error('未找到指定的元素。'); } }); </script> </body> </html>
注意事项：
- DOMContentLoaded事件： 确保在DOM（文档对象模型）完全加载和解析后才尝试访问和操作元素。document.addEventListener(‘DOMContentLoaded’, …)是比window.onload更早触发且更推荐的事件，因为它不需要等待图片、CSS等外部资源加载完成。
- offsetHeight与scrollHeight：
- offsetHeight：返回元素的完整高度，包括内容、内边距和边框。
- scrollHeight：返回元素内容的完整高度，包括由于溢出而不可见的部分。如果元素没有滚动条，scrollHeight通常等于clientHeight。
- getBoundingClientRect().height： 这是一个更现代的方法，返回元素的大小及其相对于视口的位置。getBoundingClientRect().height会返回元素的布局高度，包括内边距和边框，通常与offsetHeight相同。选择哪种方法取决于具体需求。
二、使用jQuery动态获取元素高度
jQuery库极大地简化了DOM操作。它提供了一个简洁的height()方法来获取元素的高度。
1. height() 方法
jQuery的height()方法可以获取或设置元素的高度。当不带参数调用时，它返回元素的CSS高度值，不包括内边距、边框或外边距。如果需要包含内边距或边框，可以使用innerHeight()或outerHeight()。
示例代码：
立即学习“Java免费学习笔记（深入）”；
沿用上述HTML结构，我们使用jQuery来实现相同的功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery获取元素高度</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border: 1px solid #ccc; height: 50px; /* 示例高度 */ } .Scrollable_Wrapper { overflow-x: hidden; overflow-y: scroll; border: 2px solid green; background-color: #f0fff0; /* height 将由jQuery动态设置 */ } </style> </head> <body> <div class="Scrollable_Wrapper"> <div class="list-item">列表项 A</div> <div class="list-item">列表项 B</div> <div class="list-item">列表项 C</div> <div class="list-item">列表项 D</div> <div class="list-item">列表项 E</div> </div> <p>第一个列表项的高度 (jQuery): <span id="jqueryItemHeightDisplay"></span>px</p> <p>滚动容器的计算高度 (jQuery): <span id="jqueryWrapperHeightDisplay"></span>px</p> <script> // 确保DOM内容加载完毕后执行 $(document).ready(function() { const $firstItem = $('.list-item').first(); // 获取第一个.list-item const $scrollableWrapper = $('.Scrollable_Wrapper'); if ($firstItem.length && $scrollableWrapper.length) { // 获取第一个列表项的高度 (不包含padding和border) const itemHeight = $firstItem.height(); $('#jqueryItemHeightDisplay').text(itemHeight); // 如果需要包含padding，可以使用innerHeight() // const itemHeightWithPadding = $firstItem.innerHeight(); // 如果需要包含padding和border，可以使用outerHeight() // const itemHeightWithPaddingAndBorder = $firstItem.outerHeight(); // 假设我们想让滚动容器显示两个列表项的高度 const wrapperCalculatedHeight = itemHeight * 2; $scrollableWrapper.css('height', wrapperCalculatedHeight + 'px'); $('#jqueryWrapperHeightDisplay').text(wrapperCalculatedHeight); console.log('第一个列表项的高度 (jQuery .height()):', itemHeight, 'px'); console.log('滚动容器设置的高度 (jQuery):', wrapperCalculatedHeight, 'px'); } else { console.error('未找到指定的jQuery元素。'); } }); </script> </body> </html>
注意事项：
- $(document).ready()： 这是jQuery推荐的DOM加载事件，等同于原生JavaScript的DOMContentLoaded。
- innerHeight()与outerHeight()：
- innerHeight()：返回元素的高度，包括内边距（padding）。
- outerHeight()：返回元素的高度，包括内边距（padding）和边框（border）。如果传入true作为参数，还会包含外边距（margin）。
- 根据你的具体需求（例如，是否需要将内边距或边框计入单个元素的高度），选择合适的方法。在创建滚动容器时，通常需要考虑元素的完整视觉高度，可能outerHeight(true)会更合适，因为它包含了元素之间的间距（margin）。
三、实现可滚动容器的动态高度
结合上述知识，我们可以实现一个根据子元素数量动态调整高度的可滚动容器。
核心思路：
- 确定单个子元素的实际占用高度。这可能包括其内容高度、内边距、边框，甚至外边距（如果它们是元素之间间距的一部分）。
- 决定滚动容器应显示多少个子元素。
- 将单个子元素的高度乘以希望显示的子元素数量，得到滚动容器的目标高度。
- 将计算出的高度应用到滚动容器的height CSS属性上。
示例场景分析：
假设我们的.list-item设置了margin-bottom: 5px;。如果我们要让滚动容器精确显示两个列表项，那么每个列表项的高度应该包含其自身的height、padding、border和margin-bottom。在这种情况下，offsetHeight（JavaScript）或outerHeight(true)（jQuery）会是更好的选择，因为它包含了这些属性。
JavaScript 优化示例：
document.addEventListener('DOMContentLoaded', function() { const firstItem = document.querySelector('.list-item'); const scrollableWrapper = document.querySelector('.Scrollable_Wrapper'); if (firstItem && scrollableWrapper) { // 使用offsetHeight获取包含padding和border的完整高度 // 如果需要包含margin，需要额外计算或确保margin被包含在布局中 const itemFullHeight = firstItem.offsetHeight; // 如果item之间有margin-bottom，需要将其也考虑进去 // 获取计算后的样式 const computedStyle = window.getComputedStyle(firstItem); const marginBottom = parseFloat(computedStyle.marginBottom); const itemEffectiveHeight = itemFullHeight + marginBottom; // 单个元素实际占据的高度 const numberOfItemsToShow = 2; // 希望显示2个元素 const wrapperCalculatedHeight = itemEffectiveHeight * numberOfItemsToShow; scrollableWrapper.style.height = wrapperCalculatedHeight + 'px'; console.log('单个列表项有效高度:', itemEffectiveHeight, 'px'); console.log('滚动容器最终设置高度:', wrapperCalculatedHeight, 'px'); } });
jQuery 优化示例：
$(document).ready(function() { const $firstItem = $('.list-item').first(); const $scrollableWrapper = $('.Scrollable_Wrapper'); if ($firstItem.length && $scrollableWrapper.length) { // 使用outerHeight(true)获取包含padding、border和margin的完整高度 const itemEffectiveHeight = $firstItem.outerHeight(true); const numberOfItemsToShow = 2; // 希望显示2个元素 const wrapperCalculatedHeight = itemEffectiveHeight * numberOfItemsToShow; $scrollableWrapper.css('height', wrapperCalculatedHeight + 'px'); console.log('单个列表项有效高度 (jQuery outerHeight(true)):', itemEffectiveHeight, 'px'); console.log('滚动容器最终设置高度 (jQuery):', wrapperCalculatedHeight, 'px'); } });
总结
动态计算HTML元素高度是实现灵活响应式布局的关键技术之一。无论是使用纯JavaScript的clientHeight、offsetHeight、getBoundingClientRect().height，还是jQuery的height()、innerHeight()、outerHeight()方法，理解它们之间的差异并根据具体需求选择最合适的方法至关重要。在创建自定义滚动容器时，尤其需要注意元素间距（如margin）是否也应计入单个元素的有效高度，以确保容器尺寸的精确性，从而提供更好的用户体验。