Как использовать переменную в теге «style»?

Question

Как использовать переменную в этой строке? Мои переменные «rand1» и «rand2»

style="position:absolute; TOP:'rand1'px; LEFT:'rand2'px" 

Это мой полный код.

<script> 
var rand1 = Math.floor(Math.random() * 1000) + 1 
var rand2 = Math.floor(Math.random() * 1000) + 1 
</script> 

<img id="myImage" 
src="redsquare.jpg" 
width="100" 
height="100" 
style="position:absolute; TOP:'rand1'px; LEFT:'rand2'px" 
onClick="alert(rand1); alert(rand2)"> 

Моей цель для этого кода для изображения, чтобы выскакивать на экране в случайном месте, и это интерактивное, но этот код помещает только красный квадрат изображения в верхнем левом углу.

В позиции: абсолютное, то, как правило, быть числом, где мои переменные, и не будет никаких кавычек, так что это будет выглядеть следующим образом:

style="position:absolute; TOP:100px; LEFT:200px" 

Я думал, что я мог бы просто заменить номера с переменной, но это не сработало.

Answer 1

Переменные сценария не оцениваются при анализе значений css.

Вы можете использовать скрипт для изменения значения стиля

<img id="myImage" src="redsquare.jpg" width="100" height="100" style="position:absolute;" onClick="alert(rand1); alert(rand2)" /> 
<script> 
    myImage.style.top = Math.ceil(Math.random() * 1000) + 'px'; 
    myImage.style.top = Math.ceil(Math.random() * 1000) + 'px'; 
</script> 

Обратите внимание, что сценарий помещается после создания элемента.

Answer 2

Вы могли бы вместо этого сделать в JavaScript в document.write() для <img>:

<script> 
var rand1 = Math.floor(Math.random() * 1000) + 1 
var rand2 = Math.floor(Math.random() * 1000) + 1 
document.write("<img ... style='position:absolute; TOP:"+rand1+"px"+" LEFT:"+rand2+"px' ..."); 
</script> 

Или просто изменить значения .top и .left с помощью JavaScript. Например:

document.getElementById("myImage").style.top = rand1; 
document.getElementById("myImage").style.left = rand2;