Задать вопрос
@ForSureN1
frontend dev

Почему не присваиваются значения для стилей через JS?

Добрый день, есть прелоадер, белый фон с лого по середине, когда страница загрузилась, фон пропадает, и лого должно улетать в хедер по координатам того, что там уже стоит, так вот, с помощью getBoundingClientRect(), я получил координаты лого в хедере, и пытаюсь логотипу который в центре на прелоадере задать через style.top и style.left значения из getBoundingClientRect(). Но они остаются пустыми, не понимаю почему
let preloader = document.querySelector('.preloader')
      window.onload = function () {
        document.body.classList.add('loaded_hiding');
        flyLogo();
        window.setTimeout(function () {
            preloader.hidden = true;
          // document.body.classList.add('loaded');
          // document.body.classList.remove('loaded_hiding');
        }, 2500);
      }
      function flyLogo() {
          let logo_header = document.querySelector('.js-logo');
          let header_coordinats = logo_header.getBoundingClientRect();
          let logo_preloader = document.querySelector('.preloader__logo')
          let preloader_coordinats = logo_preloader.getBoundingClientRect();

          let x_header = header_coordinats.top
          let y_header = header_coordinats.left
          console.log(x_header)
          let width_header = header_coordinats.width
          let height_header = header_coordinats.height
          let x_preloader = preloader_coordinats.x
          let y_preloader = preloader_coordinats.y

          logo_preloader.style.top = y_header;
          logo_preloader.style.left = x_header;
          logo_preloader.style.width = width_header
          logo_preloader.style.height = height_header
          logo_header.style.background = '#fff';

          console.dir(logo_preloader)
          console.dir(logo_header)

        }


В консоли
console.log(logo_preloader.style.top) - пустая строка
console.log(y_header) - 20
  • Вопрос задан
  • 89 просмотров
Подписаться 1 Простой 12 комментариев
Пригласить эксперта
Ответы на вопрос 1
@MamaLuyba
в общем, чтобы мозги не напрягать - сделай проще: после загрузки страницы добавь класс к этому лого. в классе выстави нужные значения и задай анимацию перемещения - transition: 0,5s
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 дек. 2024, в 09:41
5000 руб./за проект
23 дек. 2024, в 09:39
1000000 руб./за проект