Question

我期望从下面的脚本中在DIV中的随机位置定位一个简单的图像。当图像显示时，它们都会并排显示，而我可以在控制台上看到正在生成随机位置。有什么提示吗？

  <script type="text/javascript">
  function generateFaces(){
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    while (numberOfFaces > 0) {
      var random_left = Math.floor(Math.random()*400);
      var random_top = Math.floor(Math.random()*400);
      var theImage = document.createElement("img");
      theImage.src = "face.png";
      theImage.style.top = '"'+random_top+'px"';
      console.log("top style: " + '"'+random_top+'px"');
      theImage.style.left = '"'+random_left+'px"';
      theLeftSide.appendChild(theImage);
      numberOfFaces--;
    }
  }
</script>

谢谢！

Answer 1

试试这样。

您需要设置相对位置，并设置这样的样式。

theImage.style = "top:"+random_top+"px; left:"+random_left+"px; position:relative";

您可以在开发者控制台中检查您为图像添加的样式实际上并未应用于该元素。

#leftSide
{
  height:400px;
  width:400px;
}

<div id="leftSide"></div>
<script type="text/javascript">
  function generateFaces(){
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    while (numberOfFaces > 0) {
      var random_left = Math.floor(Math.random()*400);
      var random_top = Math.floor(Math.random()*400);
      var theImage = document.createElement("img");
      
      theImage.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR9tLvsasK-kB72yV_zC8hn0qZhHbshQdXLELCXaF1JkWIOuYfUUsuMsw";
      theImage.style = "top:"+random_top+"px; left:"+random_left+"px; position:relative";
      theLeftSide.appendChild(theImage);
    
     
      numberOfFaces--;
    }
  }
  generateFaces();
</script>

Javascript - 将图像添加到随机位置的节点

1 个答案: