Почему не обновляются координаты?

Question

[Semmy_99]

Есть встроенная функция getBoundingClientRect.

Устанавливаю её на событие клика чтобы при клике на элемент выводились в консоль координаты относительно окна браузера.

Элемент позиционирую с помощью transform:translate;

Последовательность действия следующая :

Кликаю на див - в консоль выводится число.
Меняю transform:translate(50%,35%) - но число выводится всё то же . пока не обновлю JS страницу.

Объясните пожалуйста как это работает ?

Вот Код

Answer 1

[Mikola-BLR]

У вас в консоль выводится:
console.log( pageYOffset);
А вы хотите координаты блока, тогда так надо:
console.log(a.top, a.left);

Подробнее про getBoundingClientRect()

top – Y-координата верхней границы элемента,
left – X-координата левой границы,
right – X-координата правой границы,
bottom – Y-координата нижней границы.

Answer 2

[Павел Корнилов]

Так элемент же не смещается, поэтому и позиционирование его не меняется.

Comments

[Semmy_99]

Если менять трансформ то элемент как раз так и смещается,речь о том что число в консоли не обновляется

[Павел Корнилов]

Я кликал на элемент в приведенном примере - он никуда не смещался. Если его сместить как угодно, хоть относительным позиционированием, хоть CSS3, а потом вызвать el.getBoundingClientRect(), он вернет объект с уже измененными значениями позиционирования. Во всяком случае, у меня никогда с ним проблем не было.