解决JavaScript中获取DOM元素高度的常见陷阱与最佳实践-html教程-PHP中文网

解决JavaScript中获取DOM元素高度的常见陷阱与最佳实践

本文深入探讨了在javascript中获取dom元素（特别是按钮）高度时常见的陷阱，如元素被display: none隐藏、dom选择器使用不当以及对getcomputedstyle的误解。文章提供了offsetheight和getboundingclientrect()等正确获取元素尺寸的方法，并强调了在元素可见性、dom加载时机和选择器使用方面的最佳实践，旨在帮助开发者准确、高效地获取元素尺寸信息。

在前端开发中，准确获取DOM元素的尺寸（如高度和宽度）是实现动态布局、动画效果或响应式设计的关键。然而，这一看似简单的任务却常常因为一些常见陷阱而导致开发者遇到困难。本文将针对这些问题，提供详细的解释和解决方案，帮助您掌握在JavaScript中获取元素高度的正确姿势。

1. 常见陷阱分析

在尝试获取元素高度时，开发者经常会遇到以下几个问题：

1.1 元素被 display: none 隐藏

当一个元素的 display 属性被设置为 none 时，它将不占据任何空间，并且在渲染树中不可见。在这种情况下，尝试获取其 offsetHeight 或 offsetWidth 将会返回 0。

示例代码中出现的问题： 在原始代码的CSS部分，存在一行 #bigImg1 { display: none; }。如果开发者试图获取一个包含在 bigImg1 内部或与 bigImg1 相关的元素的尺寸，并且 bigImg1 处于隐藏状态，那么结果就会是 0 或 undefined。

解决方案： 如果需要获取隐藏元素的真实尺寸，可以采取以下策略：

临时显示并获取： 在获取尺寸之前，暂时将元素的 display 属性设置为其他值（如 block 或 inline-block），获取尺寸后再恢复其 display: none 状态。为了避免页面重绘和闪烁，可以将其 position 设置为 absolute，visibility 设置为 hidden，并将其移出视口 (left: -9999px)。

立即学习“Java免费学习笔记（深入）”；

function getHiddenElementHeight(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;

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

    return height;
}

// 示例使用
// const btn = document.querySelector(".displayBtn");
// const btnHeight = getHiddenElementHeight(btn);

登录后复制

使用 getBoundingClientRect()： 即使元素被 visibility: hidden 隐藏，getBoundingClientRect() 仍然可以返回其尺寸。但如果 display: none，它同样会返回 0。因此，此方法适用于 visibility: hidden 但仍占据空间的元素。

1.2 DOM 选择器使用不当

JavaScript提供了多种DOM选择器方法，但它们有不同的返回类型和使用方式。混淆这些方法会导致无法正确选中元素。

示例代码中出现的问题： 原始代码中尝试了两种方式：

// 方式一：
const btn = document.querySelector(".displayBtn");
const btnStyle = getComputedStyle (btn);
const btnHeight = btnStyle.style.offsetHeight; // 错误用法

// 方式二：
const btn = document.getElementsByClassName(".displayBtn"); // 错误选择器参数
const btnHeight = btn[0].offsetHeight;

登录后复制

分析与修正：

document.querySelector(".displayBtn")： 这是正确的，它返回匹配指定CSS选择器的第一个元素。如果存在多个 .displayBtn 元素，它只会返回第一个。
document.getElementsByClassName(".displayBtn")： 这里的参数是错误的。getElementsByClassName 期望的参数是纯粹的类名字符串，不带 . 前缀。正确的用法是 document.getElementsByClassName("displayBtn")。
getElementsByClassName 的返回类型： getElementsByClassName 返回的是一个 HTMLCollection（或 NodeList），它是一个类数组对象，即使只有一个匹配元素，也需要通过索引（如 btn[0]）来访问具体的DOM元素。

1.3 误解 getComputedStyle 的用法

getComputedStyle 方法返回一个 CSSStyleDeclaration 对象，其中包含了元素所有最终计算后的CSS属性值。然而，offsetHeight 并不是这个对象的一个属性，而是DOM元素本身的一个属性。

百度文心百中

百度大模型语义搜索体验中心

查看详情

示例代码中出现的问题：const btnHeight = btnStyle.style.offsetHeight; 这一行是错误的。

btnStyle 已经是 getComputedStyle(btn) 返回的 CSSStyleDeclaration 对象。
btnStyle.style 是一个无效的访问，因为 btnStyle 本身就代表了样式，它没有 style 属性。
offsetHeight 是一个DOM元素的属性，不是 CSSStyleDeclaration 对象的属性。

解决方案： 如果需要获取计算后的CSS属性值（如 height），应直接从 getComputedStyle 返回的对象中获取，但请注意，这个 height 值通常只包含内容区域的高度，不包括内边距、边框等。

const btn = document.querySelector(".displayBtn");
if (btn) {
    const computedStyle = getComputedStyle(btn);
    const cssHeight = computedStyle.height; // 获取计算后的 CSS height 属性值 (字符串，如 "24px")
    // 如果需要数值，可能需要解析：parseInt(cssHeight)
}

登录后复制

2. 正确获取元素高度的方法

在JavaScript中，有几种可靠的方法可以获取DOM元素的尺寸。

2.1 使用 element.offsetHeight

offsetHeight 属性返回元素的像素高度，包括元素的垂直内边距（padding）、边框（border）和水平滚动条的高度（如果存在且可见）。它是一个整数，表示元素在屏幕上占据的实际高度。

const btn = document.querySelector(".displayBtn");
if (btn) {
    const btnHeight = btn.offsetHeight; // 获取包含 padding 和 border 的实际高度
    console.log("Button offsetHeight:", btnHeight);
} else {
    console.warn("Element with class 'displayBtn' not found.");
}

登录后复制

2.2 使用 element.getBoundingClientRect().height

getBoundingClientRect() 方法返回一个 DOMRect 对象，该对象提供了元素的大小及其相对于视口的位置。DOMRect 包含 x, y, width, height, top, right, bottom, left 等属性。这里的 height 属性与 offsetHeight 类似，也包含了元素的内边距和边框。

const btn = document.querySelector(".displayBtn");
if (btn) {
    const rect = btn.getBoundingClientRect();
    const btnHeight = rect.height; // 获取包含 padding 和 border 的实际高度
    console.log("Button getBoundingClientRect().height:", btnHeight);
} else {
    console.warn("Element with class 'displayBtn' not found.");
}

登录后复制

offsetHeight 与 getBoundingClientRect().height 的区别：

offsetHeight 返回整数值，getBoundingClientRect().height 返回浮点数值，精度更高。
在大多数情况下，它们会返回相同或非常接近的值。
getBoundingClientRect() 提供了更多关于元素位置的信息，如果同时需要位置和尺寸，它更方便。

2.3 获取计算后的 CSS height 属性

如果您需要的是CSS中明确设置的 height 属性值（例如，height: 100px;），而不包括内边距和边框，可以使用 getComputedStyle。但请注意，这通常是内容区域的高度，并且受 box-sizing 属性的影响。

const btn = document.querySelector(".displayBtn");
if (btn) {
    const computedStyle = getComputedStyle(btn);
    const cssHeightString = computedStyle.getPropertyValue('height'); // 返回如 "24px"
    const cssHeight = parseFloat(cssHeightString); // 转换为数值
    console.log("Button computed CSS height:", cssHeight);
} else {
    console.warn("Element with class 'displayBtn' not found.");
}

登录后复制

3. 完整修正示例代码

结合上述分析，以下是原始代码中获取按钮高度部分的修正版本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">

<style>
/* ... 其他样式 ... */

.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;
}

/* 确保 #bigImg1 不会阻止按钮高度的计算 */
/* 如果需要在JS中动态控制其显示，初始可以不设置display:none */
/* #bigImg1 { display: none; } */ 

</style>
</head>
<body>
<main>
<figure id="fig1">
    <figcaption>Camberley Mail</figcaption>
    <div>
        <p id="para">Text to go with picture.</p>
    </div>
</figure>

<script>
"use strict";
const numberOfFigures = document.getElementsByTagName('figure').length;
const bigImgExists = new Array(numberOfFigures + 1).fill(false);

function insert (figNum) {
    document.getElementById("para").innerHTML = "OK so far" + figNum;
}

// Insert all the buttons with thumbnail images.
for (let i=0; i < numberOfFigures; i++) imgBtn (i + 1);

function showBigImg(figNum) {
  if (!bigImgExists[figNum]) {
    var tempDiv = document.createElement('div');
    tempDiv.setAttribute("id", "bigImg" + figNum);
    tempDiv.style.backgroundColor = "white";

    // 注意：这里的按钮是动态创建并插入到DOM中的
    // 在获取其高度之前，必须确保它已经被添加到DOM并渲染。
    tempDiv.innerHTML =  
        '<button type="button"' +
                 'class="displayBtn"' +
                 'onclick="hideBigImg (' + 
                                       figNum +
                                            ')">Hide large image</button>' +
        '<' + 'img id="img' + figNum + '" ' + 
                  'src="bates-sprite.jpeg"' +
                  'style="height: 100vh; ' +
                  'transform: translate(1000px,1000px) scale(2,2);">';

    const figcap = document.getElementById("fig" + figNum).firstElementChild;
    figcap.appendChild (tempDiv);

    // 获取动态创建的按钮，此时它已在DOM中
    const createdButton = tempDiv.querySelector(".displayBtn"); 
    let btnHeight = 0;

    if (createdButton) {
        // 确保按钮不是 display: none
        // 如果tempDiv或其父元素是display:none，则需要先临时显示
        // 例如：
        // const originalTempDivDisplay = tempDiv.style.display;
        // tempDiv.style.display = 'block';
        btnHeight = createdButton.offsetHeight;
        // tempDiv.style.display = originalTempDivDisplay;
        console.log(`Button height for fig ${figNum}:`, btnHeight);
    } else {
        console.warn(`Could not find .displayBtn inside #bigImg${figNum}`);
        // 提供一个默认值，以防万一
        btnHeight = 50; // 假设一个合理的默认高度
    }

    // 获取图片尺寸
    const imgElement = document.getElementById('img' + figNum);
    const imgStyle = getComputedStyle(imgElement);
    // 注意：imgHeight和imgWidth应从实际渲染的图片中获取，而不是CSS属性
    // 假设您需要的是渲染后的尺寸，可以使用 offsetWidth/offsetHeight 或 getBoundingClientRect
    const imgHeight = imgElement.offsetHeight; // 或者 imgElement.getBoundingClientRect().height;
    const imgWidth = imgElement.offsetWidth;   // 或者 imgElement.getBoundingClientRect().width;

    // 设置图片位置
    imgElement.style.position = 'absolute';
    imgElement.style.top = -parseInt(imgHeight)/2 + "px";
    imgElement.style.left = -parseInt(imgWidth)/2 + "px";

    // 设置 tempDiv 高度
    tempDiv.style.height = (2 * imgHeight + btnHeight) + "px";

    bigImgExists[figNum] = true;
  }

  document.getElementById('thumb' + figNum).style.display = 'none';
  document.getElementById('bigImg' + figNum).style.display = 'block';
}

function hideBigImg(figNum) {
    document.getElementById('bigImg' + figNum).style.display = 'none';
    document.getElementById('thumb' + figNum).style.display = 'block';
}

function imgBtn (figNum) {
    let html = '<button type="button" ' +
                       'id="thumb' + figNum +
                     '" onclick="showBigImg (' + figNum + ')"></button>';

    const figcap = document.getElementById("fig" + figNum).firstElementChild;
    figcap.insertAdjacentHTML ("afterend", html);
}
</script>

</body>
</html>

登录后复制

4. 注意事项与最佳实践

DOM加载时机： 确保在尝试获取元素尺寸之前，该元素已经被完全加载到DOM中。通常将脚本放在 <body> 标签的底部，或使用 DOMContentLoaded 事件监听器来确保DOM已准备就绪。
元素可见性： 只有当元素在布局中占据空间时（即 display 不是 none），offsetHeight 和 offsetWidth 才能返回非零值。如果元素被 visibility: hidden 隐藏，它仍然占据空间，因此这些属性仍会返回其尺寸。
CSS box-sizing： CSS box-sizing 属性会影响 width 和 height 的计算方式。
- content-box (默认)：width/height 只包含内容区域。
- border-box：width/height 包含内容、内边距和边框。 offsetHeight 和 offsetWidth 总是返回包含内边距和边框的完整尺寸，不受 box-sizing 影响。
性能考量： 频繁地读取布局相关的属性（如 offsetHeight, offsetWidth, getBoundingClientRect()）可能会导致浏览器强制进行回流（reflow），这会影响页面性能。尽量批量读取或缓存这些值。
动态创建元素： 对于通过JavaScript动态创建的元素，必须先将其添加到DOM树中，然后才能准确获取其尺寸。

总结

在JavaScript中获取DOM元素的尺寸需要理解不同属性和方法的行为及其背后的渲染机制。核心要点包括：确保元素可见且已加载到DOM中、正确使用DOM选择器、区分 offsetHeight 和 getComputedStyle().height 的用途，并注意 display: none 对尺寸获取的影响。通过遵循这些最佳实践，您可以更准确、高效地处理页面元素的尺寸计算任务。

以上就是解决JavaScript中获取DOM元素高度的常见陷阱与最佳实践的详细内容，更多请关注php中文网其它相关文章！