使用Javascript变量设置div的样式

我正在做一个小实验，尝试使用javascript循环在div中随机放置图像。我一直有点麻烦

以下是我所做的（简化）：

for（变量i=0；i<10；i++）
{
var top=随机（-20,20）；
左变量=随机（-20,20）；
document.write(
);
}

目标是生成一些顶部和左侧的值，并且每次更新都会显示一个包含这些生成值的新图像。我知道这是样式“”的语法错误。但我试过的都没用

---

我如何才能使其工作。

您忘记了

文档中的引号。编写
时，您正在转义文档中的错误字符

document.write(
  "<div class=\"one\" style=\"left:" + left + ";\">
    <img src=\"hein.png\"/>
  </div>"
);

document.write(
"
"
);
您需要将整个
文档包装起来。用引号写下输出，如下所示：

document.write('<div class="one" style="left:"' + left + ';"><img src="hein.png"/></div>');

<> p>（你应该首先考虑使用像jQuery这样的JavaScript库。这将简化你的工作。

假设你有这个标记

<div id="image-container">

</div>



在标记中包含jQuery

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>



在将jQuery包含在标记中之后，可以从JavaScript执行此操作

for(var i = 0; i < 10; i++) {
    var top = random(-20, 20);
    var left = random(-20, 20);

    $('#image-container').append('<img src="hein.png" style="position: absolute; top: '+top+'; left : '+left +';" />');
}

for（变量i=0；i<10；i++）{
var top=随机（-20,20）；
左变量=随机（-20,20）；
$（“#图像容器”）.append（“”）；
}
您忘记了在
文档中引用字符串。请编写
调用。您还忘记了测量单位

for(var i = 0; i < 10; i++) {
   var top = random(-20, 20);
   var left = random(-20, 20);

   document.write(
      '<div class="one" style="left:' + left + 'px;top:' + top + 'px">' +
         '<img src="hein.png"/>' +
      '</div>'
   );
}

for（变量i=0；i<10；i++）{
var top=随机（-20,20）；
左变量=随机（-20,20）；
document.write(
'' +
'' +
''
);
}
改用PHP：

<?php
// Middle coords of my div
    $top = 200;
    $left = 350;

    for($i = 0; $i < 20; $i += 1)
    {
        $tran = rand(-130,170);
        $lran = rand(-300,270);
        // Fix line breaks 
        $top = $top - 49;
        echo '<div style="position:relative;
                  display: block;
                  height: 49px;
                  width:49px;
                  left:' . ($left + $lran) . 'px;
                  top:' . ($top + $tran) . 'px;
               ">' . '<img src="img.png"/>' . '</div>';
    }

?>



太棒了！感谢您对字符串语法的帮助！
但它的工作原理完全不同，因为您必须在页面加载后执行此操作，而不是在页面加载时使用document.write.Wow。这非常快速、优雅，没有转义字符！非常好，现在我对它有了更多了解。writepod在PHP中提供了一种替代方法谢谢你的帮助。
<?php
// Middle coords of my div
    $top = 200;
    $left = 350;

    for($i = 0; $i < 20; $i += 1)
    {
        $tran = rand(-130,170);
        $lran = rand(-300,270);
        // Fix line breaks 
        $top = $top - 49;
        echo '<div style="position:relative;
                  display: block;
                  height: 49px;
                  width:49px;
                  left:' . ($left + $lran) . 'px;
                  top:' . ($top + $tran) . 'px;
               ">' . '<img src="img.png"/>' . '</div>';
    }

?>