The element is absolutely positioned and has the value of the right: -1100px property right: -1100px set via CSS.
At the time of an event (let's say a click on a button), it is assigned a CSS class in which the value of right set to 0 and, using the transition property, the element begins to move smoothly.

Question : How can the current value of the right property be obtained from -1100px to 0 from -1100px ?

    1 answer 1

    I think you should use the offsetLeft property.

     document.getElementById('button').onclick = function() { var foo = document.getElementById('foo'); foo.setAttribute('class', 'to-right'); setInterval(function() { document.getElementById('position').innerHTML = document.getElementById('wrapper').offsetWidth - foo.offsetLeft - foo.offsetWidth }, 100); } 
     #wrapper { position: relative; width: 220px; height: 20px; background: blue; } #foo { position: absolute; right: 0; width: 20px; height: 20px; border: 1px solid black; box-sizing: border-box; background: red; } .to-right { right: 200px !important; transition: 5s } 
     <div id="wrapper"> <div id="foo"></div> </div> <div>right: <span id="position"></span></div> <button id="button">click</button>