Finding an element position

[spivee]

I'm having an odd type of issue. I want to be able to pass an element
name in my javascript event and find the location of the element, be it
a div, span, img whatever, specifically the top and left attributes.

I have defined my element like so...

### .css file...

#mydiv {
position:absolute;
top:100px;
left:100px;
}

### .html file...

<div id="mydiv" ><a href="#" onMouseUp="myAction()">Some
Content</a></div>
<div id="test"></div>

### and in my .js file I call to test the position..

var divstyle = document.getElementById("mydiv").style;
var left = divstyle.left;
var top = divstyle.top;

document.getElementById("test").innerHTML += "<BR>left="+left;
document.getElementById("test").innerHTML += "<BR>top="+top;

If I do this, left and top show as undefined. If I change up the html
to call a style tag directly, like this..

<div id="mydiv" style="top:100px;left:100px;">....

Then it works just fine. I'm not sure I'm understanding why these two
css definitions are responding differently. I'd rather not have to
define the location of all my elements directly in the html, preferring
to rely on definitions in my css files.

Am I missing something? Is there an alternate way of finding an
elements position?

 

[RobG]

I'm having an odd type of issue. I want to be able to pass an element
name in my javascript event and find the location of the element, be it
a div, span, img whatever, specifically the top and left attributes.

I have defined my element like so...

### .css file...

#mydiv {
position:absolute;
top:100px;
left:100px;
}

### .html file...

<div id="mydiv" ><a href="#" onMouseUp="myAction()">Some
Content</a></div>
<div id="test"></div>

### and in my .js file I call to test the position..

var divstyle = document.getElementById("mydiv").style;
var left = divstyle.left;
var top = divstyle.top;

What you get here are the top and left attributes of the div's style
object, you don't get style settings that are inherited from CSS styles.

document.getElementById("test").innerHTML += "<BR>left="+left;
document.getElementById("test").innerHTML += "<BR>top="+top;

If I do this, left and top show as undefined. If I change up the html
to call a style tag directly, like this..

<div id="mydiv" style="top:100px;left:100px;">....

Then it works just fine. I'm not sure I'm understanding why these two
css definitions are responding differently. I'd rather not have to
define the location of all my elements directly in the html, preferring
to rely on definitions in my css files.

Start at quirksmode.org:

<URL:http://www.quirksmode.org/js/findpos.html>

 

[Matt Kruse]

Start at quirksmode.org:
<URL:http://www.quirksmode.org/js/findpos.html>

Or my code, which actually provides more accurate results in a variety of
environments:
http://www.JavascriptToolbox.com/lib/objectposition/

But really, I don't think either of those are what you really want.

Instead, you need to understand that an object's .style attribute only
refers to what has been declared inline, via the "style" attribute.
To get style attributes which have been applied using non-inline styles,
check into getComputedStyle (standard) and currentStyle (IE) to get what you
want.

 

[Gérard Talbot]

I'm having an odd type of issue. I want to be able to pass an element
name in my javascript event and find the location of the element,

The location of the element related to what exactly? to which coordinate
system? related to user screen? related to client area (browser/user
agent viewport)? related to document? related to document view? related
to root element? related to body element? related to positioned
containing block? related to offsetParent node? related to parent
element? related to relatively positioned element within the containment
hierarchy?


be it

a div, span, img whatever, specifically the top and left attributes.

I have defined my element like so...

### .css file...

#mydiv {
position:absolute;
top:100px;
left:100px;
}

### .html file...

<div id="mydiv" ><a href="#" onMouseUp="myAction()">Some
Content</a></div>
<div id="test"></div>

### and in my .js file I call to test the position..

var divstyle = document.getElementById("mydiv").style;
var left = divstyle.left;
var top = divstyle.top;

document.getElementById("test").innerHTML += "<BR>left="+left;
document.getElementById("test").innerHTML += "<BR>top="+top;

If I do this, left and top show as undefined.

IMO, you got the good answer from the browser: undefined. The <div
id="test"> was not absolutely positioned.


If I change up the html

to call a style tag directly, like this..

<div id="mydiv" style="top:100px;left:100px;">....

Then it works just fine.

It's misleading since the <div id="mydiv">'s position is static, not
absolute, nor relative.

I'm not sure I'm understanding why these two

css definitions are responding differently. I'd rather not have to
define the location of all my elements directly in the html, preferring
to rely on definitions in my css files.

Am I missing something? Is there an alternate way of finding an
elements position?

It all depends on what is the referenced coordinate system. Right now,
I'm 2 feet away from my PC computer. But depending on what is your
referenced coordinate system, you could say I'm 1000 miles from London.
Again, it all depends on the referenced coordinate system to begin with.

Gérard

 

[spivee]

But really, I don't think either of those are what you really want.

Instead, you need to understand that an object's .style attribute only
refers to what has been declared inline, via the "style" attribute.
To get style attributes which have been applied using non-inline styles,
check into getComputedStyle (standard) and currentStyle (IE) to get what you
want.

Thanks Matt and Rob. I think this is exactly what I was looking for. I
appreciate the help. I'm adding both your sites to my bookmarks for
future review. I've got a lot of learning to do.

Gerard Talbot wrote :

The location of the element related to what exactly? to which coordinate
system? related to user screen? related to client area (browser/user
agent viewport)? related to document? related to document view? related
to root element? related to body element? related to positioned
containing block? related to offsetParent node? related to parent
element? related to relatively positioned element within the containment
hierarchy?

Gerard, I appreciate that maybe you were trying to be helpful, but I'm
quite new at this and if my examples didn't provide enough information
for you to get the gist of what I was trying to do, I don't think I can
make it any clearer. These are probably issues I should consider, but
I had positioned my div originally as 'absolute' (although I'll admit
when I put the style tag inline on my example I forgot to position it
absolute again) and all your questions seem to be assuming I had placed
the position as 'relative' to something else. I wasn't trying to be
tricky, I was being simple in my example. I wasn't trying to find any
difficult relative position, I was just curious as to why my js style
calls were only finding the in-line style tags. I think Matt and Rob
understood and answered my question sufficiently.