javascript - 使用 createElement Javascript 制作的定位图像

Question

我有以下 CSS 代码

#block {
    width: 1000px;
    height: 500px;
    overflow: hidden;
    background-image: url("images/back.png");
    cursor: pointer;
}

我正在尝试创建一个位于 block 中间的图像。

var imag = document.createElement("IMG");
imag.setAttribute("src", "images/player_blue.png");
block.appendChild(imag);
imag.style.left = block.clientWidth/2 + "px";
imag.style.top = block.clientHeight/2 + "px";

图像当前显示在屏幕的左上角。为什么会这样？

Answer 1

需要设置position作为absolute

#block {
    position: relative;
    width: 1000px;
    height: 500px;
    overflow: hidden;
    background-image: url("images/back.png");
    cursor: pointer;
}

然后

var imag = document.createElement("IMG");
imag.setAttribute("src", "images/player_blue.png");
block.appendChild(imag);
imag.style.left = block.clientWidth / 2 + "px";
imag.style.top = block.clientHeight / 2 + "px";
imag.style.position = 'absolute';

演示:Fiddle