Применить стили в JS

Question

Всем привет! С JS не дружу, но надо решить проблему. Нашел в инете скрипт, работает так как мне надо, но есть одна проблема, я не знаю как тут определить стили для объектов. Надо чтобы картинки при их появлении на экране размещались в определенных местах страницы (назначить им различные top и left).

const img = document.querySelector('img');
const cycleImages = ["https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
                     
"https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif",
  "https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
  "https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif"
]

async function cycle() {
  img.src = cycleImages[0]; 
  await new Promise(r => setTimeout(r, 2000));
  img.src = cycleImages[1];
  await new Promise(r => setTimeout(r, 2500));
  img.src = cycleImages[2];
  await new Promise(r => setTimeout(r, 5000));
  img.src = cycleImages[3];
  await new Promise(r => setTimeout(r, 2500)); 
}
cycle();

<img>

Всем Спасибо.

Answer 1

Для этого можно использовать свойство style или другие

const img = document.querySelector("img");
const cycleImages = [
  "https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",

  "https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif",
  "https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
  "https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif"
];

async function cycle() {
  img.src = cycleImages[0];
  await new Promise((r) => {
    setTimeout(r, 2000);
    img.style.top = "100px";
    img.style.left = "100px";
  });
  img.src = cycleImages[1];
  await new Promise((r) => {
    setTimeout(r, 2500);
    img.style.top = "100px";
    img.style.left = "100px";
  });
  img.src = cycleImages[2];
  await new Promise((r) => {
    setTimeout(r, 5000);
    img.style.top = "100px";
    img.style.left = "100px";
  });
  img.src = cycleImages[3];
  await new Promise((r) => {
    setTimeout(r, 2500);
    img.style.top = "100px";
    img.style.left = "100px";
  });
}
cycle();

img {
  position: absolute;
}

<img>

Answer 2

Надо сделать так

const img = document.querySelector('img');
const cycleImages = ["https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
                     
"https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif",
  "https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
  "https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif"
]

async function cycle() {
  img.src = cycleImages[0];
   img.style = 'position: absolute; top: 10px; left: 20px;'
  await new Promise(r => setTimeout(r, 2000));
  img.src = cycleImages[1];
  img.style = 'position: absolute; top: 100px; left: 200px;'
  await new Promise(r => setTimeout(r, 2500));
  img.src = cycleImages[2];
   img.style = 'position: absolute; top: 100px; left: 20px;'
  await new Promise(r => setTimeout(r, 5000));
  img.src = cycleImages[3];
   img.style = 'position: absolute; top: 100px; left: 100px;'
  await new Promise(r => setTimeout(r, 2500)); 
}
cycle();

<img>

БЛОГ НА HUSL

Применить стили в JS

Ответы (2 шт):