JavaScript offsetHeight
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 offsetHeight 属性。此属性对于测量元素的尺寸至关重要，包括内边距、边框和滚动条（如果已渲染）。
基本定义
offsetHeight 属性返回元素的像素高度，包括垂直内边距和边框。它是一个只读属性，提供元素的布局高度。
与 clientHeight 不同，offsetHeight 包括元素的边框和滚动条（如果存在）。它不包括外边距或可见区域外的元素。
基本的 offsetHeight 示例
本示例演示了如何获取一个简单 div 元素的 offsetHeight。
<!DOCTYPE html>
<html>
<head>
<title>Basic offsetHeight</title>
<style>
#box {
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div id="box">Content</div>
<button onclick="showHeight()">Show Height</button>
<p id="output"></p>
<script>
function showHeight() {
const box = document.getElementById('box');
const output = document.getElementById('output');
output.textContent = `Element height: ${box.offsetHeight}px`;
}
</script>
</body>
</html>
在此示例中，我们有一个具有指定高度、内边距、边框和外边距的 div。单击按钮时，将显示 offsetHeight。
报告的高度将是 200px（150px 内容 + 40px 内边距 + 10px 边框）。请注意，外边距不包含在 offsetHeight 的计算中。
比较 offsetHeight 和 clientHeight
此示例显示了 offsetHeight 和 clientHeight 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>Height Comparison</title>
<style>
#container {
height: 200px;
padding: 15px;
border: 10px solid blue;
overflow: auto;
}
#content {
height: 300px;
background: #eee;
}
</style>
</head>
<body>
<div id="container">
<div id="content">Scrollable content</div>
</div>
<button onclick="compareHeights()">Compare Heights</button>
<p id="result"></p>
<script>
function compareHeights() {
const container = document.getElementById('container');
const result = document.getElementById('result');
result.innerHTML = `
offsetHeight: ${container.offsetHeight}px<br>
clientHeight: ${container.clientHeight}px
`;
}
</script>
</body>
</html>
此示例创建了一个带有较大内容 div 的可滚动容器。offsetHeight 包括内边距和边框，而 clientHeight 仅包括内边距。
offsetHeight 将是 250px（200px + 30px 内边距 + 20px 边框），而 clientHeight 将是 230px（200px + 30px 内边距）。
动态高度测量
此示例演示了 offsetHeight 如何随动态内容而变化。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Height</title>
<style>
#dynamic {
border: 2px solid green;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div id="dynamic">Initial content</div>
<button onclick="addContent()">Add Content</button>
<button onclick="showHeight()">Show Height</button>
<p id="heightDisplay"></p>
<script>
function addContent() {
const div = document.getElementById('dynamic');
div.innerHTML += '<br>Additional line of content';
}
function showHeight() {
const div = document.getElementById('dynamic');
const display = document.getElementById('heightDisplay');
display.textContent = `Current height: ${div.offsetHeight}px`;
}
</script>
</body>
</html>
此示例展示了 offsetHeight 如何随着内容添加到元素中而变化。当更多内容使元素变高时，高度会增加。
每次单击“添加内容”按钮都会添加新的一行，“显示高度”将显示当前的 offsetHeight。这演示了该属性的动态特性。
测量隐藏元素
此示例探讨了 offsetHeight 如何处理隐藏元素。
<!DOCTYPE html>
<html>
<head>
<title>Hidden Elements</title>
<style>
#hiddenBox {
height: 100px;
padding: 20px;
border: 5px solid red;
background: #ffdddd;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="hiddenBox">This element can be hidden</div>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<button onclick="checkHeight()">Check Height</button>
<p id="heightInfo"></p>
<script>
function toggleVisibility() {
const box = document.getElementById('hiddenBox');
box.classList.toggle('hidden');
}
function checkHeight() {
const box = document.getElementById('hiddenBox');
const info = document.getElementById('heightInfo');
info.textContent = `offsetHeight: ${box.offsetHeight}px`;
}
</script>
</body>
</html>
此示例表明，对于具有 display: none 的元素，offsetHeight 返回 0。该属性仅测量可见元素。
当元素可见时，它返回完整的高度（150px）。当隐藏时，它返回 0。这对于涉及隐藏元素的布局计算很重要。
响应式布局示例
此示例展示了如何在响应式设计中使用 offsetHeight。
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<style>
#responsive {
width: 80%;
margin: 0 auto;
padding: 20px;
border: 3px solid #333;
resize: both;
overflow: auto;
}
#sizeInfo {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="responsive">
Resizable container. Try resizing me by dragging the bottom-right corner.
<p id="sizeInfo"></p>
</div>
<script>
const container = document.getElementById('responsive');
const info = document.getElementById('sizeInfo');
function updateSizeInfo() {
info.textContent = `Current height: ${container.offsetHeight}px`;
}
// Update on initial load
updateSizeInfo();
// Update on resize
container.addEventListener('mouseup', updateSizeInfo);
</script>
</body>
</html>
此示例创建了一个可调整大小的容器，并使用 offsetHeight 显示其当前高度。当用户调整元素大小时，高度会更新。
resize: both CSS 属性使元素可调整大小。mouseup 事件在调整大小后触发高度测量。
来源
在本文中，我们探讨了 JavaScript 中的 offsetHeight 属性。此属性对于在 Web 开发中准确测量元素的高度（包括边框和内边距）至关重要。
作者
列出 所有 JS DOM 教程。