html - HTML 无法更新元素位置

Question

我试图设置出现在我的页面上的所有图像的位置。我尝试通过 DOM 设置一张图片的位置，但似乎没有效果。控制台正在打印更新位置消息，但图像位置未更新。我可以通过 DOM 访问图像，因为我可以通过使用“图像”元素变量来更新图像宽度。我只是不能更新它的位置。

HTML

<div *ngIf='this.imagesPerRow'>
  <div *ngFor="let image of images; let i = index; let last = last">
      {{last ? setPosition() : ''}}
    <img id={{i}} [style.width.%]="width" src={{image.src}} alt="">
  </div>
</div>

CSS

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

img {
  display: block;
}

打字稿

setPosition() {
  const image: HTMLElement = document.getElementById('1');

  if (image) {
    console.log("Updating position");
    image.style.left = "100px";
  }
}

标签： htmlcssangulartypescriptdom

Answer 1

cssleft属性仅适用于定位元素，如此处所述

所以改变你的风格如下应该做到这一点

img {
  display: block;
  position: relative;
}