JavaScript获取DOM元素高度的常见陷阱与正确实践

<button id="myButton" style="display: none; padding: 10px; border: 1px solid black; height: 50px;">
    这是一个隐藏的按钮
</button>
<script>
    const button = document.getElementById('myButton');
    console.log("隐藏按钮的 offsetHeight:", button.offsetHeight); // 输出: 0
</script>

const btn = document.querySelector(".displayBtn");
if (btn) {
    // 获取计算样式中的高度（字符串，不含边框和内边距）
    const btnStyle = getComputedStyle(btn);
    const computedHeightString = btnStyle.height; // 例如 "24px"
    const computedHeightNumber = parseInt(computedHeightString);
    console.log("计算样式高度 (不含边框和内边距):", computedHeightNumber);

    // 获取实际布局高度（数字，含内边距和边框）
    console.log("实际布局高度 (offsetHeight):", btn.offsetHeight);
}

// 假设HTML中有一个 <button class="displayBtn"></button>

// 错误示范 (原始问题中的用法):
// const btnError = document.getElementsByClassName(".displayBtn"); // 错误：类名不应包含 '.'
// if (btnError.length > 0) {
//     const btnHeight = btnError[0].offsetHeight; // 如果 btnError 为空，此处会报错
// } else {
//     console.log("使用错误的getElementsByClassName选择器未找到元素。");
// }

// 正确示范 1：使用 querySelector
const btnQ = document.querySelector(".displayBtn");
if (btnQ) {
    console.log("使用 querySelector 获取高度:", btnQ.offsetHeight);
} else {
    console.log("使用 querySelector 未找到 .displayBtn 元素。");
}

// 正确示范 2：使用 getElementsByClassName
const buttons = document.getElementsByClassName("displayBtn"); // 正确：类名不包含 '.'
if (buttons.length > 0) {
    const btnG = buttons[0];
    console.log("使用 getElementsByClassName 获取高度:", btnG.offsetHeight);
} else {
    console.log("使用 getElementsByClassName 未找到 displayBtn 元素。");
}

/**
 * 获取一个可能被 display: none 隐藏的元素的实际渲染高度。
 * @param {HTMLElement} element - 需要获取高度的DOM元素。
 * @returns {number} 元素的实际渲染高度（像素）。
 */
function getActualHeightOfHiddenElement(element) {
    if (!element) {
        console.warn("尝试获取一个不存在的元素的高度。");
        return 0;
    }

    // 保存元素的原始样式，以便之后恢复
    const originalDisplay = element.style.display;
    const originalVisibility = element.style.visibility;
    const originalPosition = element.style.position;

    // 临时设置样式：
    // display: block - 使元素参与布局计算
    // visibility: hidden - 使元素不可见，但不影响其布局空间
    // position: absolute - 将元素移出文档流，避免影响其他元素布局
    element.style.display = 'block';
    element.style.visibility = 'hidden';
    element.style.position = 'absolute';

    // 获取高度
    const height = element.offsetHeight;

    // 恢复元素的原始样式
    element.style.display = originalDisplay;
    element.style.visibility = originalVisibility;
    element.style.position = originalPosition;

    return height;
}

const btn = document.querySelector(".displayBtn");
if (btn) {
    // 如果按钮是可见的，可以直接使用 getBoundingClientRect
    const rect = btn.getBoundingClientRect();
    console.log("使用 getBoundingClientRect 获取高度 (可见时):", rect.height);

    // 如果按钮是隐藏的，需要先临时改变样式
    const actualHeight = getActualHeightOfHiddenElement(btn);
    console.log("使用 getBoundingClientRect 获取高度 (隐藏时，通过临时显示):", actualHeight);
}

<div id="tempDiv" style="background-color: white;">
    <button type="button" class="displayBtn">Hide large image</button>
    <!-- 其他内容 -->
</div>

// 辅助函数：获取可能被 display: none 隐藏的元素的实际高度
function getActualHeightOfHiddenElement(element) {
    if (!element) return 0;

    const originalDisplay = element.style.display;
    const originalVisibility = element.style.visibility;
    const originalPosition = element.style.position;

    element.style.display = 'block';
    element.style.visibility = 'hidden';
    element.style.position = 'absolute';

    const height = element.offsetHeight;

    element.style.display = originalDisplay;
    element.style.visibility = originalVisibility;
    element.style.position = originalPosition;

    return