html - 如何通过 typescript 获取 img 高度

Question

我试图在加载图像后获取图像的高度。我尝试了几种不同的方法，但是 offsetHeight 打印 0，而其他的什么都不打印。元素已经在查询高度时加载，就在我查询它们的高度之前，我通过 getElementById 和 setAttribute 调用它们的 id 成功设置了它们的宽度。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.gallery img {
  width: 100%;
  display: block;
}

Id 6 对应一个图像，它确实存在/已经在 typescript 中的这些调用点呈现。

我在 bottom 背后的想法是，如果我能得到图像的顶部和底部，我就可以在没有得到它的情况下计算出高度。

console.log(document.getElementById("6").offsetHeight.toString());
console.log(document.getElementById("6").offsetHeight.valueOf());
console.log(document.getElementById("6").style.height);
console.log(document.getElementById("6").style.bottom);
console.log(document.getElementById("6").style.borderBottom);

HTML

  <div id={{i}} *ngFor="let image of images; let i = index;">
    <img class="img-responsive" src={{image.src}} alt="" (click)="clicked()">
  </div>

Answer 1

试试这个 -

const el: HTMLElement = document.getElementById('6');
console.log(el.offsetHeight);