获取JavaScript中DOM元素准确尺寸的深度指南

function getHiddenElementDimensions(element) {
    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;
    const width = element.offsetWidth;
    // 或者使用 getBoundingClientRect() 获取更精确的浮点数尺寸
    // const rect = element.getBoundingClientRect();
    // const height = rect.height;
    // const width = rect.width;

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

    return { height, width };
}

// 假设有一个按钮，初始是隐藏的
// <button class="displayBtn" style="display: none;">Hide large image</button>
const btn = document.querySelector(".displayBtn");
if (btn) {
    const dimensions = getHiddenElementDimensions(btn);
    console.log("隐藏按钮的实际高度:", dimensions.height);
    console.log("隐藏按钮的实际宽度:", dimensions.width);
}

// CSS 示例
/*
.displayBtn {
  background-color: black;
  border: none;
  color: #00FF00;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  margin: 2em 1em;
  cursor: pointer;
  visibility: hidden; // 初始隐藏，但占据空间
}
*/

const btn = document.querySelector(".displayBtn");
if (btn) {
    // 如果元素是通过 visibility: hidden; 或 opacity: 0; 隐藏的
    // 可以直接获取其尺寸
    const btnHeight = btn.offsetHeight;
    const btnWidth = btn.offsetWidth;
    console.log("通过 visibility: hidden; 隐藏按钮的实际高度:", btnHeight);
    console.log("通过 visibility: hidden; 隐藏按钮的实际宽度:", btnWidth);

    // 如果需要使其可见
    btn.style.visibility = 'visible';
}

/**
 * 安全地获取DOM元素的几何尺寸（高度和宽度）。
 * 如果元素被 display: none; 隐藏，则会临时使其可见来获取尺寸。
 * @param {HTMLElement} element 要获取尺寸的DOM元素。
 * @returns {{height: number, width: number}} 包含高度和宽度的对象。
 */
function getElementGeometry(element) {
    if (!element || typeof element.offsetHeight === 'undefined') {
        console.warn("无效的元素或无法获取尺寸。");
        return { height: 0, width: 0 };
    }

    // 如果元素当前可见，直接获取尺寸
    if (element.offsetHeight > 0 || element.offsetParent !== null) {
        return { height: element.offsetHeight, width: element.offsetWidth };
    }

    // 如果元素被 display: none; 隐藏
    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;
    const width = element.offsetWidth;

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

    return { height, width };
}

// 示例用法：
// 假设HTML中有一个按钮，可能在不同状态下被隐藏或显示
// <button id="myButton" class="displayBtn" style="display: none;">Click Me</button>
const myButton = document.getElementById("myButton");

if (myButton) {
    const { height, width } = getElementGeometry(myButton);
    console.log(`按钮的实际高度: ${height}px`);
    console.log(`按钮的实际宽度: ${width}px`);
} else {
    console.error("未找到ID为 'myButton' 的元素。");
}