javascript - 在 HTML 中定位图像(使用按钮创建图像)

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

更新:

如果你分配 position:absolute ，那么你必须给他们 left ， top 或 bottom , 正确 !

所以:

你必须将额外的参数传递给你的函数，你想在其中显示你的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..";