如何使用JavaScript复制div高度并应用到另一div，实现二者高度始终同步

针对你给出的DOM结构：

<div class="thisOne">
</div>

<div class="thisHeight">
</div>

要实现两个div高度始终保持一致，可参考以下JavaScript实现方案：

方案1：单次同步高度 #

如果只需要执行一次高度同步，直接读取目标高度赋值即可：

// 获取两个元素节点
const thisOne = document.querySelector('.thisOne');
const targetHeightEl = document.querySelector('.thisHeight');

// offsetHeight包含元素content、padding、border尺寸，适配大多数场景
thisOne.style.height = `${targetHeightEl.offsetHeight}px`;

// 若仅需要同步内容高度（不含padding、border），可改用以下写法
// thisOne.style.height = getComputedStyle(targetHeightEl).height;

方案2：自动持续同步高度（推荐） #

如果需要thisHeight元素高度发生任何变化时，都自动同步到thisOne，使用ResizeObserver监听尺寸变化是目前性能最优、兼容性最好的实现方式：

const thisOne = document.querySelector('.thisOne');
const targetHeightEl = document.querySelector('.thisHeight');

// 初始化先同步一次高度
syncHeight();

// 实例化尺寸监听器
const heightObserver = new ResizeObserver(() => {
  syncHeight();
});

// 绑定监听thisHeight元素的尺寸变化
heightObserver.observe(targetHeightEl);

// 同步高度方法
function syncHeight() {
  thisOne.style.height = `${targetHeightEl.offsetHeight}px`;
}

// 后续需要停止同步时可调用销毁监听
// heightObserver.disconnect();

注意事项 #

• 若你的场景中元素高度变化仅伴随窗口 resize 触发，也可以额外绑定window.resize事件兜底，但ResizeObserver已经可以覆盖绝大多数元素尺寸变化场景，不需要额外做轮询或冗余监听
• 不要使用定时器轮询判断高度变化，会产生不必要的性能损耗

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