Estoy intentando asignar propiedades de una matriz llamada 'hechizo' a elementos img recién creados alojados dentro de un contenedor div.
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); }sin embargo, cuando ejecuto el código, registra newImg.position como indefinido para todas las imágenes. no estoy seguro de lo que está mal
Establezca las propiedades del atributo de estilo: 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>