使用 setAttribute 后如何使位置成为绝对位置而不是 'undefined'

Question

我正在尝试将名为 'spell' 的数组的属性分配给位于 div 容器中的新创建的 img 元素。

for (let i = 0; i <spell.length; i++){
          let styles = spell[i]
          let container = document.getElementById('imagecontainer');
          let newImg = document.createElement('img');

          let top = styles.top;
          let left = styles.left;
          let imgSrc = styles.src;
          newImg.setAttribute('width','25px');
          newImg.setAttribute('left',left);
          newImg.setAttribute('top',top);
          newImg.setAttribute('src',imgSrc);
          newImg.setAttribute('height','25px')
          newImg.setAttribute('position','absolute');
            console.log(newImg.position)
          container.appendChild(newImg);
        }

然而，当我运行代码时，它记录 newImg.position 所有图像都未定义。我不确定哪里出了问题

Answer 1

设置样式属性的属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

const spell = [{
  top: "10px",
  left: "10px",
  src: "foo.png"
}, {
  top: "50px",
  left: "50px",
  src: "bar.png"
}];

const container = document.getElementById('imagecontainer');

for (let i = 0; i < spell.length; i++) {
  let styles = spell[i];

  let newImg = document.createElement('img');
  let top = styles.top;
  let left = styles.left;
  let imgSrc = styles.src;

  newImg.style.width = '25px';
  newImg.style.height = '25px';
  newImg.style.top = top;
  newImg.style.left = left;
  newImg.style.position = 'absolute';
  newImg.setAttribute("src", imgSrc);

  console.log(newImg.style.position);
  container.appendChild(newImg);
}

<div id="imagecontainer"></div>

使用 setAttribute 后如何使位置成为绝对位置而不是 'undefined'

How to get position to be absolute rather than 'undefined' after using setAttribute

javascript

html

css

position