Problem z pobraniem wartości cssa przez Java Script

Question

Witam,dlaczego nie pobiera mi prawidłowo aktualnej wartości top mojego elementu.Kod przedstawiam poniżej:

https://codepen.io/DorianBajorek/pen/VJgBPm

Answer 1

Wartość stylu dla top nadałeś w CSS. Natomiast odczytujesz tą wartość z listy styli zadeklarowanych w formie inline. Użyj window.getComputedStyle -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#Getting_style_information

Jeśli chcesz żeby obecny kod JavaScript odczytał wartość stylu top, to w HTML zapisz:

<div id="elem" style="top: 100px"></div> 

i z CSS usuń deklarację stylu dla top.

Niemniej, stylowanie w formie inline jest złą praktyką, bo:

• mieszasz warstwę prezentacji z warstwą treści, lepiej to robić za pomocą klas
• podnosisz specyficzność stylu, nadpisać taki styl możesz albo następnym inline, albo musisz użyć !important w CSS
• utrudniasz powielenie stylu dla innych elementów - musisz albo ręcznie, albo JavaScriptem przekopiować taki styl do innych elementów