无法根据子元素的高度设置元素的高度[重复]

Question

我有一个元素，一个 ID 为 homeColumnContain 的 div，我需要根据其中一个绝对定位的子元素，一个 ID 为 homePictureID 的图像元素来设置它的高度。我的代码如下所示：

window.onload = function() {resizeColumns()};
window.onresize = function() {resizeColumns()};
function resizeColumns() {
  document.getElementById("homeColumnContain").style.height = document.getElementById("homePictureID").style.height;
}

<div id="homeColumnContain">
  <div class="homeColumn">
    <!-- content -->
  </div>
  <div class="homeColumn">
    <div id="slideContain">
      <img src="images/image.jpg" id="homePictureID"/>
      <!-- content -->
    </div>
  </div>
</div>

代码似乎什么也没做。我添加了调整窗口大小和加载窗口大小的侦听器，因为这两个事件是应该更改高度的时候。我尝试在 HTML 文档中移动我的脚本，但没有成功。我没有接受过大量关于 JavaScript 的正式培训，所以任何关于为什么这种方法不起作用的反馈都会很棒。我希望解决方案不要转向使用 jQuery。

编辑：我还尝试了一些被标记为重复的问题的回答，但没有一个解决了我的问题。此外，如果相关，我在 homePictureID 中将宽度定义为 100%。

Answer 1

试试这个：

document.getElementById("homeColumnContain").style.height = `${document.getElementById("homePictureID").getBoundingClientRect().height}px`

不同之处在于您没有为 homePictureID 元素设置高度样式，但可以检查 DOM 上的实际节点的渲染高度。