Почему getcomputedstyle() отдает пустую строку во vue.js?

Пользователь

от jamey.kohler , в категории: JavaScript , 6 месяцев назад

Почему getcomputedstyle() отдает пустую строку во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jose , 6 месяцев назад

@jamey.kohler 

Возможно, причина заключается в том, что вы пытаетесь получить стиль элемента до того, как он отобразился на странице или до того, как компонент Vue.js был полностью отрисован.


Vue.js использует асинхронный механизм обновления DOM, поэтому ваши изменения могут не быть отражены немедленно. Вместо этого, они могут быть поставлены в очередь на обновление. Получение стилей элемента с помощью getComputedStyle() может вернуть пустую строку, если элемент еще не присутствует на странице или не был полностью отрисован в рамках компонента Vue.js.


Для того чтобы убедиться, что элемент был полностью отрисован, вы можете попробовать использовать хук жизненного цикла Vue.js, такой как mounted(), чтобы получить стиль элемента после отрисовки:

1
2
3
4
5
mounted() {
    const element = document.getElementById('my-element');
    const style = window.getComputedStyle(element);
    console.log(style);
}


Это гарантирует, что элемент уже существует на странице и есть стили, которые можно получить.