javascript - 如何在使用 javascript 创建的不同图像中使用不同的 css 样式？

Question

下面的 javascript 和 css 代码在屏幕上的不同位置打印了两个图像，并且工作得很好。

print_first_image();
print_second_image();

function print_first_image() {
   const img = document.body.appendChild(document.createElement('img'));
   img.src = '/image/SjeyK.jpg?s=32&g=1';
   img.style.top = '150px';
   img.style.left = '50px';
}

function print_second_image() {
   const img = document.body.appendChild(document.createElement('img'));
   img.src = '/image/SjeyK.jpg?s=32&g=1';
   img.style.top = '50px';
   img.style.left = '50px';
}

img {
   position:absolute;
   width: 50px;
   height: 50px;
}

但是，我想在两个独立的 css 函数中设置这些图像的位置，而不是像我目前正在做的那样在 javascript 代码中定义它们的位置.我想做的伪代码是这样的:

Javascript:

print_first_image();
print_second_image();
function print_first_image() {
   const img = document.body.appendChild(document.createElement('img'));
   img.src = '/image/SjeyK.jpg?s=32&g=1';
}

function print_second_image() {
   const img = document.body.appendChild(document.createElement('img2'));
   img.src = '/image/SjeyK.jpg?s=32&g=1';
}

CSS:

img {
   position:absolute;
   width: 50px;
   height: 50px;
   top: 150px;
   left: 50px;
}

img2 {
   position:absolute;
   width: 50px;
   height: 50px;
   top: 50px;
   left: 50px;
}

唯一的区别是我想用 css 声明 top 和 left 属性，而不是用 javascript 声明。我该怎么做？

Answer 1

CSS 必须是:

img {
 position:absolute;
 width: 50px;
 height: 50px;
 top :150px;
 left :50px;
}

img2 {
 position:absolute;
 width: 50px;
 height: 50px;
 top: 50px;
 left:50px;
}

是“:”而不是“=”