I am attempting to assign properties from an array called 'spell' to newly created img elements housed within a div container.

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);
        }

however, when I run the code it logs newImg.position as undefined for all images. I'm not sure what is wrong

CodePudding user response：

Set the properties of the style attribute: 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>