javascript - 我如何使用 javascript 中的 getElementById 创建一个图像数组，每个图像数组都有一个唯一的 id？

Question

这是我的代码，但是当我尝试使用图像引用时，它的值为 null。我希望能够使用它来访问表中的另一个图像并将 src 属性更改为 preloadImages 数组中的一个。我已经制作了表格，但无法获得对 preloadImages 数组的各个元素的引用。我希望使用 document.getElementById('id') 每个图像都有一个唯一的 ID 请帮忙!!非常感谢!

var preloadImages = new Array();
SIZE = 52;  

for(var h=0; h<SIZE; h++){
    preloadImages[h] = new Image();  
    preloadImages[h].src = h+'.png';
    preloadImages[h].height =100;
    preloadImages[h].width = 70;
    preloadImages[h].id = "cardImage"+h+"";              
    var cardImageRef = document.getElementById("cardImage"+h+"");
    document.write(cardImageRef+'h'); //This line is for testing, it just returns null
}

Answer 1

除非元素存在于 DOM 树中，否则不能使用 getElementById()。此修改会将它们添加到 DOM:

for(var h=0; h<SIZE; h++){
    preloadImages[h] = new Image(70, 100);        // size here
    preloadImages[h].src = h+ ".png";
    preloadImages[h].id = "cardImage" + h; 

    document.body.appendChild(preloadImages[h]);  // add to DOM, or some parent element

    var cardImageRef = document.getElementById("cardImage" + h);
    document.write(cardImageRef + "h"); //This line is for testing, it just returns null
}

但是，由于您已经在数组中引用了元素，因此您可以使用 id 的索引(而不是根本使用 id)简单地查找元素。如果您的页面布局有多个元素，这往往会更快。

var image = preloadImages[index];

如果您使用无法通过索引识别的图像，您可以这样做(但在这种情况下可能不相关):

function getImage(id) {
   for(var i = 0; i < preloadImages.length; i++) {
     if (preloadImages[i].id === id) return preloadImages[i];
   }
   return null;
}

所以你可以在这里使用它，例如:

for(var h=0; h<SIZE; h++){
    preloadImages[h] = new Image(70, 100);        // size here
    preloadImages[h].src = h + ".png";
    preloadImages[h].id = "cardImage" + h;              
}

document.write(getImage("cardImage0"));