Styling Divs с Javascript Vars

Question

Я делаю небольшой эксперимент, пытаясь случайным образом размещать изображения внутри div, используя цикл javascript. У меня были проблемы с этим.

Вот что я (упрощенно):

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 + ";\""> 
    <img src="hein.png"/> 
    </div> 
); 
} 

Цели в том, чтобы произвести некоторые верхние и левые значения, и каждый itteration отобразить новое изображение с этими сгенерированными значениями. Я знаю, что это синтаксическая ошибка со стилем = "". Но ничего, что я пробовал, не работал

Как я могу заставить это работать.

Answer 1

Вы забыли кавычки в document.write и вы спасаясь неправильные символы внутри него

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

Answer 2

Вы Мид, чтобы обернуть весь document.write выход в кавычки, например:

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

Answer 3

You следует сначала рассмотреть возможность использования библиотеки JavaScript, такой как jQuery. Это упростит вашу работу.

Допустим, у вас есть эта разметка

<div id="image-container"> 

</div> 

Включать JQuery в вас разметить

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

Из JavaScript вы могли бы сделать это, после того, как вы включили JQuery в разметке

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 +';" />'); 
} 

Answer 4

Вы забыли процитировать строку в вызове document.write. Также вы забыли блок измерения.

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

Answer 5

Использование 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>'; 
    } 

?> 

Awesome! Спасибо за помощь в синтаксисе строки!