javascript - 图像在目标元素内时 ClientRect 高度错误

Question

我有简单的 html:

<a href='#' id='target'>
  <img src='https://sftextures.com/texture/6485/0/6487/metal-dots-very-dark-grey-black-solid-material-seamless-texture-256x256.jpg'/>
</a>

我想获取基本上应该复制图像的#target 元素的高度:

let target = document.getElementById('target');
let height = target.getBoundingClientRect().height;
// result 18px, image size is 256px

为什么目标链接元素不复制子元素的高度？假设我的网站有数千个元素，我无法识别 child 。在与实际高度不匹配的类似情况下，如何获得正确的高度？

https://jsfiddle.net/b2y8gtLx/

Answer 1

如果你有更多的元素，尝试设置一个 <div>作为 parent 。应该可以正常工作。