如何获取插入子元素后元素的实际高度？（浏览器扩展场景）

要解决这个问题，核心是先让元素临时摆脱固定高度限制，自然撑开后获取真实高度，再将该高度设为新的固定值。具体步骤如下：

实现代码 #

基础HTML结构 #

<div id="root">
  <div style="height: 20px; width: 20px; background-color: black;"></div>
  <br>
  <div style="height: 20px; width: 20px; background-color: black;"></div>
</div>

JavaScript 逻辑 #

const root = document.querySelector('#root');
const targetElement = root.children[0];

// 保存原固定高度（可选，用于后续回滚操作）
const originalFixedHeight = targetElement.style.height;

// 临时将元素高度设为auto，让它被内部新元素撑开
targetElement.style.height = 'auto';

// 插入你需要的新元素
targetElement.innerHTML = '<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196" />';

// 获取撑开后的真实高度，三种方法任选其一
const actualHeight = targetElement.offsetHeight;
// 或者用 getBoundingClientRect(): const actualHeight = targetElement.getBoundingClientRect().height;
// 或者用 clientHeight: const actualHeight = targetElement.clientHeight;

// 将真实高度设置为新的固定高度
targetElement.style.height = `${actualHeight}px`;

// 验证输出
console.log('原固定高度:', originalFixedHeight);
console.log('实际撑开高度:', actualHeight);
console.log('更新后的固定高度:', targetElement.style.height);

关键细节说明 #

• 为什么要先设为auto？：原元素被设置了固定height，插入子元素后不会自动撑开，必须临时取消固定高度，才能让浏览器计算出元素真实的高度。
• 三种高度获取方法的区别：
  • offsetHeight：返回整数，包含内容、内边距、边框的总高度，最适合用来设置固定高度。
  • getBoundingClientRect().height：返回浮点数的精确高度，包含内容、内边距、边框，适合需要高精度的场景。
  • clientHeight：返回整数，包含内容和内边距，但不包含边框，适合不需要边框高度的场景。

内容的提问来源于stack exchange，提问作者Viewed