Question

我一直在使用这段代码：

<div class="divClassName">
<button onClick="functionName1();");'>Enter Text Here</button>
<script>
    function functionName1() {
        var src = "name.jpg";
        show_image("name.jpg", 200, 200, "absolute", 1, "<alt>");
    }


    function show_image(src, width, height, position, zIndex, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height
        img.position = position;
        img.style.zIndex = zIndex;
        img.alt = alt;

        document.body.appendChild(img);
    }
</script>
</div>
<!-- Use actual names for divClassName, functionName1, and name.jpg if you want to. -->

这会使图像在按钮单击时出现，但它出现在屏幕的左上角而不是我想要的位置。我一直在尝试

function show_image(src, width, height, position, left, top, zIndex, alt) {
      var img = document.createElement("img");
      img.src = src;
      img.width = width;
      img.height = height
      img.position = position;
      img.left = left;
      img.top = top;
      img.style.zIndex = zIndex;
      img.alt = alt;

......但它不起作用。任何修复/答案？

编辑：问题已回答。使用：

img.style.position = position;
img.style.left = left;
img.style.top = top;

Answer 1

您将图像置于绝对位置。因此，如果top = 0且left = 0，它将在屏幕的左上角呈现。

如果你想让它在div的左上角渲染。您仍然可以使用top = 0和left = 0来绝对定位图像。

但是：你需要给父元素一个相对位置。

所以例如：

<body>
    <div id="container">
        // img src etc...
    </div>
<body>

和css应该是

#container {
    width: 960px;
    height: 500px;
    margin: 100px auto;
    position: relative;
}

img {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

已更新：

如果您指定position:absolute，则必须提供left，top或bottom，right！

所以：

您必须将额外参数传递给您希望显示img

的函数

function show_image(src, width, height, position,left,top, zIndex, alt) {  //left,top as example
    var img = document.createElement("img");
    img.src = src;
    img.style.width = width;
    img.style.height = height
    img.style.position = position;
    img.style.left = left+'px';
    img.style.top = top+'px';
    img.style.zIndex = zIndex;
    img.alt = alt;

    document.body.appendChild(img);
}

或另一种将Style赋予img的简短方法是：

img.attributes = "style = left:"+left+"px;top:"+top+"px;...And So on..";

在HTML中定位图像（使用创建图像的按钮）

2 个答案: