图像元素未正确放置在div中

swi*_*itz 1 javascript css dom

我尝试将一个img放在一个div中,在一个特定的地方(200,100),但它总是位于左上角(0,0).我究竟做错了什么?

<!doctype html>
<html>
<head>
    <title>Matching Game</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body id="theBody" onload="build_set()">
    <h1>Matching Game</h1>
    <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div>
    <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div> 
    <script>
        function build_set() {
            var leftSide = document.getElementById("leftSide");
            var rightSide = document.getElementById("rightSide");
            var smile = document.createElement("img");
            smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png")
            smile.style.top = "200px";
            smile.style.left = "100px";
            leftSide.appendChild(smile);
        }
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

小智 5

你还需要position为img 设置.这是jsFiddle

        function build_set() {
            var leftSide = document.getElementById("leftSide");
            var rightSide = document.getElementById("rightSide");
            var smile = document.createElement("img");
            smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png")
            smile.style.top = "200px";
            smile.style.left = "100px";
            smile.style.position = "absolute";
            leftSide.appendChild(smile);
        }
        build_set();
Run Code Online (Sandbox Code Playgroud)
    <h1>Matching Game</h1>
    <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div>
    <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div> 
Run Code Online (Sandbox Code Playgroud)