Question

我如何在这一行中使用变量？我的变量是＆＃34; rand1＆＃34;和＆＃34; rand2＆＃34;

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)">

我对此代码的意图是让图像在随机位置的屏幕上弹出，并且可以点击，但此代码只会将红色方块图像放在左上角。

在position：absolute中，我的变量通常会有一个数字，并且没有引号，所以它看起来像这样：

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>

或者只是通过JavaScript更改.top和.left的值。例如：

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

如何在＆＃34; style＆＃34;中使用变量？标签？

2 个答案: