Question

我正在尝试制作一个匹配的游戏，左手侧和右手侧的图像随机定位。即使使用了正常工作的随机函数（使用console.log检查），我的图像也会出现在一行中（不是随机出现的）。

我的javascript，css和html代码段写在下面....

var numberOfFaces=5;
var theLeftSide=document.getElementById("leftSide");
var imgHeight=80;
var imgWidth=80;

function generateFaces(){

while(numberOfFaces>0){
var smileImg=document.createElement("img");

smileImg.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smileImg.style.height=imgHeight + "px";
smileImg.style.width=imgWidth + "px";
var randomTop=Math.random() * 400;
randomTop=Math.floor(randomTop);
console.log(randomTop);
var randomLeft=Math.random() * 500;
randomLeft=Math.floor(randomLeft);
console.log(randomLeft);
smileImg.style.top= randomTop + "px";
smileImg.style.left=randomLeft + "px";
leftSide.appendChild(smileImg);
numberOfFaces--;
}

}

body{
margin:50px;

}
p{
text-align:center;
font-size:18px;
}

#outer{
border:0.5px solid black;
position:realtive;
height:500px;
margin:20px;
}


#rightSide,#leftSide{
width:500px;
height:500px;
position:absolute;
}

#rightSide{
 left:700px;
 border-left:2px solid black;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" />
<script type="text/javascript" src="MatchingGame.js" ></script>
<title>Matching Game</title>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left side.</p>
<div id="outer">
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>
</body>
</html>

Answer 1

因为默认情况下，img元素为inline，因此会忽略其left，top，right和bottom。

如果要定位元素，请使用其他显示模式之一，例如position: absolute，它们相对于偏移容器绝对定位。（在您的情况下，偏移容器为#leftSide。）也许使用此规则：

#leftSide img {
    position: absolute;
}

示例：

var numberOfFaces=5;
var theLeftSide=document.getElementById("leftSide");
var imgHeight=80;
var imgWidth=80;

function generateFaces(){

while(numberOfFaces>0){
var smileImg=document.createElement("img");

smileImg.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smileImg.style.height=imgHeight + "px";
smileImg.style.width=imgWidth + "px";
var randomTop=Math.random() * 400;
randomTop=Math.floor(randomTop);
console.log(randomTop);
var randomLeft=Math.random() * 500;
randomLeft=Math.floor(randomLeft);
console.log(randomLeft);
smileImg.style.top= randomTop + "px";
smileImg.style.left=randomLeft + "px";
leftSide.appendChild(smileImg);
numberOfFaces--;
}

}

body{
margin:50px;

}
p{
text-align:center;
font-size:18px;
}

#outer{
border:0.5px solid black;
position:realtive;
height:500px;
margin:20px;
}


#rightSide,#leftSide{
width:500px;
height:500px;
position:absolute;
}

#rightSide{
 left:700px;
 border-left:2px solid black;
}

#leftSide img {
    position: absolute;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" />
<title>Matching Game</title>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left side.</p>
<div id="outer">
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>
<script type="text/javascript" src="MatchingGame.js" ></script>
</body>
</html>

另请注意，我已将script标记移至文档的 end ，就在结束</body>标记之前。它位于顶部（在顶部），在它尝试使用getElementById找到的元素之前运行得太早，因此var theLeftSide = document.getElementById("leftSide");返回null。但最后，元素已经创建，并返回元素。

为什么我的图像位置没有随机定位，即使随机功能正常工作？

1 个答案: