Question

我正在制作一个使用javascript随机出现在屏幕上的元素。为了使用javascript将图像添加到随机生成的元素，我该怎么办？

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";
    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}

Answer 1

您可以创建一个新的img元素，为它提供图像的源，然后将该img元素附加到您创建的element上。（我建议使用比“元素”更具描述性的变量名）

相关代码如下：

var myImage = document.createElement('img');
myImage.src = 'my_image.jpg';
element.appendChild(myImage);

Answer 2

有些宽泛，但是我认为您可以考虑使用创建的div的background属性。像这样：

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";

    // Here
    element.style.backgroundImage = "url('img_enemy.png')";

    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}

将图像添加到元素

2 个答案: