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

Posted 2023-03-06

【中文标题】无法根据子元素的高度设置元素的高度[重复]

【英文标题】：Unable to set the height of an element based on the height of its child [duplicate]

【发布时间】：2019-11-04 15:43:15

【问题描述】：

我有一个元素，一个 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%。

【问题讨论】：

您的图像没有样式属性，因此您需要使用其他方法提取其高度。阅读this了解更多说明

【参考方案1】：

试试这个：

document.getElementById("homeColumnContain").style.height = `$document.getElementById("homePictureID").getBoundingClientRect().heightpx`

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

【讨论】：

感谢您的回复！我尝试了你的解决方案，但它仍然没有做任何事情，而且我已经完全按照你写的内容进行了编码。

抱歉，.height 返回像素数的整数。相应地编辑了我的答案。

做到了。谢谢！