Take the 2-minute tour ×

I'm trying to manipulate a div element. Although I have defined certain property values, I can't seem to get the initial values.

Here's the problem: Fiddle

I'm at the end of my rope... Thanks.

share|improve this question

3 Answers 3

up vote 1 down vote accepted

I think you have to use document.styleSheets, find your stylesheet, then loop through the cssRules(IE rules) list to match a selector to "#viewbase" and then you can access your style properties like you would have with inline styles, since the style info in there is also a CSSStyleDeclaration ( so you can use element.style.left and so on).

Sidenode: getComputedStyle doesn't work on most versions of IE. IE has currentStyle properties for each element, but it's not the same thing. Maybe a combination of both will also work.


Managed to get the initial positions, if that's what you need, you can reassign these values if i remember well.

function trigger(e) {

item = this;

if (!e) var e = window.event;
if (e.pageX || e.pageY) {
    x1 = e.pageX;
    y1 = e.pageY;
else if (e.clientX || e.clientY) {
    x1 = e.clientX;
    y1 = e.clientY;

document.getElementById("ex").innerHTML = x1;
document.getElementById("wye").innerHTML= y1;
// the stylesheet you defined, in a standalone context, it might 
// have another index, (i.e. 0 if it's the only one)
list = document.styleSheets[2].cssRules;

    //match #viewbase
    if(list[i].selectorText.toLowerCase() == "#"+item.id)
    { item = list[i];

document.getElementById("xval").innerHTML = item.style.left;
document.getElementById("yval").innerHTML = item.style.top;

document.getElementById("parseX").innerHTML = parseInt(item.style.left, 10);
document.getElementById("parseY").innerHTML = parseInt(item.style.top, 10);

document.getElementById("debug").innerHTML = 'clicked!';

document.onmouseup = release;

The other version would be to use the following

var styleDef = window.getComputedStyle(item) || item.currentStyle;  
document.getElementById("xval").innerHTML = styleDef.left;
document.getElementById("yval").innerHTML = styleDef.top;
share|improve this answer

The problem is that your style is not defined within the html but comes from css. In that case you need to use getComputedStyle to retrieve the styling information. Do something like


rather than item.style.

share|improve this answer
What exactly does this return? How would I get specific property values from this? –  SharpBarb Aug 14 '11 at 8:31
It returns a CSSStyleDeclaration object, with the final used values of all the CSS properties of the element. Just replace item.style with this. For example, instead of item.style.left, use document.defaultView.getComputedStyle(item,null).left. See jsfiddle.net/ckWVB for example. –  Soarer Aug 14 '11 at 8:43

How about using item.offsetLeft and item.offsetTop. This will include margins and padding, but you should be able to easily compensate for this fact. Here is an updated JSFiddle.

document.getElementById("xval").innerHTML = item.offsetLeft;
document.getElementById("yval").innerHTML = item.offsetTop;

Again, in this case, these calls return 10, 10 respectively, instead of 0, 0, which you are looking for. That said, is this enough to move you past your issue?

share|improve this answer
If you do it this way, I have to know the margin value for the element and the parent objects border value... –  SharpBarb Aug 14 '11 at 8:30

Your Answer


