Question

我尝试使用appendChild函数来创建具有某些样式属性的新图像节点。使用它之后，所有属性都会消失。这些图像应该随机定位在leftSide div上，但实际上，它们会排成一行。

<html>
  <head>
    <title>Matching Game</title>
    <style>
        #rightSide {
            position: absolute;
            left: 700px;
            border-left: 1px solid black;
            width:700px; 
            height:700px;
        }

        #leftSide {
            width:700px; 
            height:700px;
            position: absolute;

        }

    </style>
</head>



<body onload="generateFaces()">
    <h1>Matching Game</h1>
    <p>Click on the extra smiling face on the left</p>

    <div id='leftSide'>

    </div>

    <div id='rightSide'>

    </div>

    <script>
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById('leftSide');


        var generateFaces = function() {
            for(var i = 0; i < numberOfFaces; i++)
                {
                  var img = document.createElement('img');
                    img.src = 'smile.png';
                    img.style.top =  Math.floor(Math.random()*600);
                    img.style.left = Math.floor(Math.random()*600);
                    theLeftSide.appendChild(img);
                }
        }
    </script>
</body>


</html>

http://i.stack.imgur.com/fZaYA.png

Answer 1

Math.floor(Math.random()*600);将返回一个数字。除非值为0，否则CSS left和top属性需要长度。长度有单位。

此外，您尚未将position媒体资源从[{1}}更改为static，因此left和top媒体资源无效，因为它们仅适用于定位元素。

Answer 2

应该解决你的问题。

var img = document.createElement('img');
img.style.top =  Math.floor(Math.random()*600) + 'px';

appendChild删除样式

2 个答案: