Как я могу получить свойство CSS top от элемента в JavaScript

Question

Как получить свойство CSS top из элемента в javascript.

Я пробовал document.getElementById(element).offsetTop, но всегда возвращается 0. Когда я установил top: 500px; в CSS элемента.

Answer 1

offsetTop получает позицию элемента на странице (относительно offsetParent, который является любым позиционированным элементом или иногда некоторыми другими типами элементов) в пикселях в виде числа.

style.top получает строковое значение свойства top в style="top: 500px" только для встроенных атрибутов .

Если вы хотите получить значение стиля top, которое было установлено из таблицы стилей, вы не можете использовать style.top, который просто вернет '', чтобы сообщить вам, что top не было установлено в style атрибут. Вместо этого есть window.getComputedStyle, который определяется стилем DOM Level 2, и element.currentStyle, который используется IE. (Старые браузеры также не поддерживают.)

var top= (window.getComputedStyle?
    window.getComputedStyle(element, null).getPropertyValue('top') :
    element.currentStyle? element.currentStyle.top : '0'
);

Обычно есть лучшие способы, которые не включают в себя попытки чтения таблиц стилей.

Answer 2

Попробуйте

element.style.top 

Answer 3

offsetTop возвращает верхнее смещение к нижнему узлу в дереве, для которого установлено position:relative; или position:absolute;.

У вас есть родительская позиция, установленная на относительно или абсолют ?