Задать вопрос
RazerVG
@RazerVG
Full-stack

Почему не могу получить значение из стилей?

В componentDidMount() запускаю функцию для получения стилей активного слайда.

handlerCalculateWidthSlides = () => {
        let slideActive = this._slider.innerSlider.list.querySelector('.slick-current');

        let stylesActiveSlide = getComputedStyle(slideActive);

        console.log(stylesActiveSlide); 
        console.log(stylesActiveSlide.width);
    };


Просматриваю первый консоль лог, высота 900, во втором выводит всю ширину экрана.

Делаю так:

console.log(slideActive);

        // <div data-index="0" className="slick-slide slick-active slick-center slick-current" tabIndex="-1" aria-hidden="false" style="outline: none; width: 900px;">

        console.log(slideActive.style.width)
        
        // 20%


Откуда появляется 20%, не понимаю ?

Использую react-slick.
  • Вопрос задан
  • 83 просмотра
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
slideActive.style.width - это значение заданное в атрибуте style, а getComputedStyle возвращает вычисленные браузером фактические значения.
Скорей всего библиотека меняет значение width в рантайме. Попробуйте отрыть панель разработчика и посмотреть значения в конкретный момент времени там. Магии там никакой быть не должно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽