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

Question

[Владимир Голубь]

В 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.

Answer 1

[Антон Спирин]

slideActive.style.width - это значение заданное в атрибуте style, а getComputedStyle возвращает вычисленные браузером фактические значения.
Скорей всего библиотека меняет значение width в рантайме. Попробуйте отрыть панель разработчика и посмотреть значения в конкретный момент времени там. Магии там никакой быть не должно.

Comments

[Владимир Голубь]

Да, так и есть. При изменении ширины меняется width. Каким образом тогда его можно получить ?

[Антон Спирин]

Владимир Голубь, смотря в какой момент его надо получить. Можно, например, resize слушать. Тут стоит про оптимизацию почитать. Сами пользователи ну очень редко делают ресайз окна, поэтому, думаю, не страшно если он будет немного троттлить.

[Владимир Голубь]

Антон Спирин, нужно получить после componentDidMount.

[Владимир Голубь]

Антон Спирин, почему в последнем варианте в style 900px, а получаю 20% ?

[Антон Спирин]

Владимир Голубь, ну во-первых из примеров не ясно где и в какой момент вы делаете выводы в консоль. Во-вторых тут можно посмотреть глазами в реальном времени как изменяется значение в панели разработчика. Ну и в-третьих вы пишите, что значение меняется при изменении ширины, а получить его хотите в componentDidMount, но это же два ничем не связанных события. Тут надо либо искать другой путь, либо больше деталей.

[Владимир Голубь]

Антон Спирин,

//в style width 956 (inline стили)

        console.log(this._slider.innerSlider.list.querySelector('.slick-current.slick-active').style.width);

        // 20%

        console.log(ReactDOM.findDOMNode(this._slider.innerSlider.list.querySelector('.slick-current.slick-active')).style.width);

        // 20%

        console.log(this._slider.innerSlider.list.querySelector('.slick-current.slick-active').getBoundingClientRect().width)

        // 1524 -  вся ширина экрана

        console.log(ReactDOM.findDOMNode(this._slider.innerSlider.list.querySelector('.slick-current.slick-active')).getBoundingClientRect())

        // 1524 - вся ширина экрана

[Владимир Голубь]

Антон Спирин,

нужно при открытии галереи получать ширину центрального слайда.

[Владимир Голубь]

Антон Спирин,

console.log(getComputedStyle(ReactDOM.findDOMNode(this._slider.innerSlider.list.querySelector('.slick-current.slick-active'))).width);

        // 1524 - вся ширина экрана

        console.log(getComputedStyle(this._slider.innerSlider.list.querySelector('.slick-current.slick-active')).width);
        
        // 1524 - вся ширина экрана

[Антон Спирин]

Владимир Голубь, Попробуйте так:

setTimeout(() => {
  console.log(this._slider.innerSlider.list.querySelector('.slick-current.slick-active').style.width);
}, 0);

Костыль, конечно, но должно помочь. Возможно, сам слайдер имеет нужный колбек в API.

[Владимир Голубь]

Антон Спирин, да, так работает)