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

【问题标题】：Cannot set width and height of cloned element无法设置克隆元素的宽度和高度
【发布时间】：2021-01-22 20:18:27
【问题描述】：

我使用 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";
}

【问题讨论】：

如何设置它的初始大小？你使用样式还是<img/> 属性？

标签： javascript dom element clone

【解决方案1】：

试着清理一下。

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;

【讨论】：

谢谢，但这仍然不起作用。我可以 consosle.log("sprites[i].width") 甚至 style.width 并且属性实际上确实被保存了，它们只是不影响任何东西

【解决方案2】：

使用它

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

【讨论】：