How to read element.style.top?

  casting, css, html, javascript

It is possible to move an element using :

var element = document.getElementById("animate");
element.style.top = 10 + "px"; 
element.style.left = 10 + "px";

So why is it not possible to read the position using :

var element = document.getElementById("animate");
var vertical = element.style.top; 
var horizontal = element.style.left;
document.getElementById("write0").innerHTML = "vertical = " + vertical + " horizontal = " + horizontal;

The answer to that snippet is "vertical = horizontal = "

How are we supposed to read it? I tried adding .toString() but the result was the same.

Source: Ask Javascript Questions

6 thoughts on - How to read element.style.top?

  • This question is totally VALID and the answer posted elsewhere doesn’t work; i.e.,
    document.getElementById(‘targetID’).style.top

    FF in Linux Mint, if that makes any difference.

    Something change recently?

  • I just learned that in some configurations that value CAN be read. Of course one requirement is to make that element position:absolute. Beyond that, I’m still learning…

  • I’m going to investigate the notion that there is some kind of scope barrier between that value and maybe a or element, hidden/visible aspect, and/or the code that tries to access it. I’ve got some of that variation going on. I’ll experiment with that hypothesis.

  • I know that for some of my elements, element.style.top is both writeable and readable, but other elements don’t allow reading it. More specifically, an object tag element dynamically displaying as a video element does allow read of this.style.top, but another object tag element dynamically displaying as a table element only allows write of this.style.top. I suspect the inconsistency has something to do with the element dynamics itself rather than anything in the larger context.

LEAVE A COMMENT