无法设置克隆元素的宽度和高度

如何解决无法设置克隆元素的宽度和高度

我使用 JS 克隆了一个图像元素。我可以通过设置克隆的 left 和 top 属性来移动它。但是我不能改变大小。

var sprite_org = "WEs1";
var sprites = new Array(7);

var org = document.getElementById(sprite_org);
sprites[0] = org;

for (var i=1; i<7; i++) {
    let clone = org.cloneNode(true);
    clone.setAttribute( 'id',"Sprite" + i );
    org.parentNode.appendChild(clone);
    sprites[i] = document.getElementById("Sprite"+i);
    sprites[i].style.top = "0px";
    sprites[i].style.width = "500px";
}

解决方法

试着清理一下。

for (var i=1; i<7; i++) {
    let clone = org.cloneNode(true);
    clone.setAttribute( 'id',"Sprite" + i );
    clone.style.top = "0px";
    clone.style.width = "500px";
    sprites[i] = clone;
    org.parentNode.appendChild(clone);
}

图像还具有宽度和高度的“属性”，而不仅仅是它们的 css 样式：

clone.width = 500;
clone.height = 300;

,

使用它

for (var i=1; i<7; i++) {
    sprites[i] = org.cloneNode(true);
    sprites[i].style.left = i*200+"px";;
    document.getElementById("WEbggroup").appendChild(sprites[i]);
}