Jump to content

Get element.style.top(left) value

Recommended Posts


Recently i faced a problem which seems very odd to me and I would like to find the answer or at least acceptable explanation. But let's go straight to it.

Let's have two divs one inside the other - the code is something like:

<div id="imgframe">  <div id="innercont" class="dragme">    <a class="marker" style="left: 1060px; top:658px;" onclick="movepos(1060, 658)"></a>  </div></div><button type="button" onclick="displayattr()">Test</button>

they are styled with css like this:

#imgframe {	width: 950px;	height: 600px;	overflow: hidden;}#innercont {	width: 1994px;	height: 1144px;	position: relative;	left: -600px;	top: -300px;}

And with javascript I am trying to find the top and left values of the #innercont. I have written the following functions:

function getx() {	var bg = document.getElementById("innercont");	var xs = bg.style.left;	var x = Number(xs.replace("px",""));	return x;}function gety() {	var bg = document.getElementById("innercont");	var ys = bg.style.top;	var y = Number(ys.replace("px",""));	return y;}function displayattr() {	var sum = getx() + ", " + gety();	alert(sum);}

Everything so far seems fine, but when I use displayattr() just after the page has been loaded it returns 0, 0. The code works fine when I use javascript to set the position of the #innercont:

function reset() {	var bg = document.getElementById("innercont");	bg.style.left="-600px";	bg.style.top="-300px";}

They say that element.style.top sets or returns the top position of a positioned element, but it appears that it is not the same if we set the position by using css or javascript. So far I have managed to solve the problem by using "getComputedStyle" or adding onload="reset()" to the body tag but I don't want to use either since they mess my code later.

If anyone has an explanation why does it happen so I'll be very grateful. Thanks in advance.

Link to post
Share on other sites

Found the solution. In fact element.style.left (or top) can be used to get values from inline styles. I tried to use the above functions and I only switched from external style sheet to internal and they worked. If we use external or internal style sheet they won't work. So I modified the functions like this:

function getx() {	var bg = document.getElementById("innercont");	var curleft = 0;	if (bg.offsetParent) do {		curleft += bg.offsetLeft;		}	while (bg = bg.offsetParent);	return curleft;}

and they work just fine :)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...