javascript图像位置_Javascript_Html_Css_Dom

javascript图像位置

javascript html css dom

javascript图像位置,javascript,html,css,dom,Javascript,Html,Css,Dom,我试着把微笑的图像放在左侧div的随机位置上。但是这些图像不是以随机顺序出现的，而是连续显示的。为什么会这样 <html> <head> <h1>Matching Game</h1> <p>Click on the extra smiling face on the left</p> <div id= "leftSide"></div> <div id =

我试着把微笑的图像放在左侧div的随机位置上。但是这些图像不是以随机顺序出现的，而是连续显示的。为什么会这样

<html>
    <head>
    <h1>Matching Game</h1>
    <p>Click on the extra smiling face on the left</p>
    <div id= "leftSide"></div>
    <div id = "rightSide"></div>
    <style>
        img1 {position:absolute}
        div {position:absolute; width:500px;height: 500px}
        #rightSide {left:500px;border-left: 1px solid black}
    </style>
         <script>
            var numberOfFaces =5,i;
            var theLeftSide = document.getElementById("leftSide");


            function generateFaces()
            {
                for( i=0;i<numberOfFaces;i++)
                {
                var img1 =document.createElement("img");
                img1.src = "smile.png";
                var topran = Math.random() * 400;
                var topran = Math.floor(topran);
                var leftran = Math.random() *400;
                var leftran = Math.floor(leftran);
                img1.style.top = topran + "px"; 
                img1.style.left = leftran + "px";
                theLeftSide.appendChild(img1);
                }
            }

        </script>
    </head>
    <body onload = "generateFaces()">

    </body>
</html>


配对游戏
点击左边额外的笑脸
img1{位置：绝对}
div{位置：绝对；宽度：500px；高度：500px}
#右侧{左侧：500px；左侧边框：1px纯黑}
var numberOfFaces=5，i；
var theLeftSide=document.getElementById（“leftSide”）；
函数生成器（）
{
对于（i=0；i您不能在CSS中使用img1{position:absolute}
设置微笑图像的样式。请将CSS更改为.smile{position:absolute}
（类选择器），并将类smile
设置为img1

var img1 =document.createElement("img");
img1.src = "smile.png";
img1.className = "smile";

img1
不是有效的CSS选择器。请将其更改为仅img
或#左侧img
是的。我们还可以使用“img”而不是“img1”在样式规则中…thnxYes，img
将起作用，但它将应用于DOM中的所有图像，这是非常广泛的-这就是为什么我建议使用类名…很高兴它起作用了！