Hello, I have written a page that is something like this:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
	#imgframe {
		width: 950px;
		height: 600px;
		border: solid 1px #8AC007;
		overflow: hidden;
		cursor: move;
		margin: 0;
		padding: 0;
	}

	#innercont {
		width: 1994px;
		height: 1144px;
		border: 0;
		padding: 0;
		margin: 0;
		background: url('img/map.jpg');
		position: relative;
		left: -600px;
		top: -300px;
	}

	.marker {
		position: absolute;
		cursor: pointer;
		height: 7px;
		width: 7px;
		background: url('img/marker.png') no-repeat;
	}
</style>

<script>
function displayattr() {
	var xs = document.getElementById("innercont").style.left;
	var x = Number(xs.replace("px",""));
	var ys = document.getElementById("innercont").style.top;
	var y = Number(ys.replace("px",""));
	var sum = x + ", " + y;
	alert(sum);
}
</script>

</head>
<body>
<div id="imgframe">
	<div id="innercont" class="dragme">
		<a class="marker" style="left: 1300px; top:864px;" onclick="movepos(1300, 864)"></a>
	</div>
</div>

<button type="button" onclick="displayattr()">Test</button>

</body>
</html>
The problem with this code is that in the style the position of the div id="innercont" is set to: left: -600px and top: -200px;, but when I use document.getElementById("innercont").style.top(left) it returns top=0; left=0.
I can solve this problem by adding an onload function to the body tag of the page, that will set the initial position exactly where I want by using "document.getElementById("innercont").style.top(left)" instead of css top and left, but I don't want to, since that would mess my other functions.
If anyone has had the same problem I would be more than happy to share their solutions.
Thanks in advance.
B. Chavdarov