JavaScript img.style.top 和 img.style.left 不工作

Question

我无法使用 img.style.top 和 img.style.left[=18 从 JavaScript 中正确定位图像=]，它总是显示在左上角，除非我使用 CSS。请帮助这个新手。

<---css file--->
.imgTable {
    position: relative;
    z-index: -1;
}
.imgDeal {
    position: absolute;
    transform: scale(.5);
    //top: 60px;                     // --- this works ---
    //left: 470px;                   // --- this works ---
    z-index: 1
}

<--- html file --->
div class="table-body">
    <div class=imgTable>
        <img src="images/table.png">
        <div id="imgDeal" class="imgDeal"> </div>
    </div>
</div>

<--- JS file --->
var img = document.createElement('img');
img.src = "images/deal.png";
img.style.top = "60px";              // --- this does not work ---
img.style.left = "470px";            // --- this does not work ---
document.getElementById('imgDeal').appendChild(img);

Answer 1

left 和 top 如果一个元素是 position: static（这是默认值）什么都不做，你用普通的 CSS 而不是用 JS 覆盖。

Answer 2

您的 JavaScript 代码将内联样式添加到您新创建的 img 元素，但不会添加到您的 .imgDeal div 元素。您新创建的 img 元素未绝对定位或固定，因此 top 和 left css 规则无效。

一种可能的解决方案是将您的 CSS 代码从

更改为

.imgDeal {
    position: absolute;
    transform: scale(.5);
    z-index: 1
}

到

.imgDeal img {
    position: absolute;
    transform: scale(.5);
    z-index: 1
}

并可选择为您的 .imgDeal div 元素指定固定的宽度和高度。