store element property in a variable

Forum Moderators: open

Message Too Old, No Replies

store element property in a variable

simon_j

4:07 am on Mar 20, 2004 (gmt 0)

does anyone know how to store and element property(for example the left position of the element)?

can the getElementById method be used as a value?

i'm trying to write a script to grab the current position of an iframe and move it 10 pixels left.

isitreal

11:30 pm on Mar 21, 2004 (gmt 0)

That's difficult, you have to use different methods for different browsers from what I remember, hopefully someone will post an elegant, cross browser (opera, safari, ie 5x mac, ie windows, mozilla) solution). I was working on that and gave up since I couldn't find an elegant solution.

Purple Martin

11:42 pm on Mar 21, 2004 (gmt 0)

It's easy. You need to do it twice, once for browsers that recognise getElementById (Netscape 6+, Mozilla, Opera, IE6+, etc) and once for browsers that recognise all (IE5).

This is how you get the left position of an element (NOTE: getElementById uses curved brackets, all uses square brackets):

var posLeft;
if (document.getElementById) {
posLeft = document.getElementById("myElement").style.left;
} else if (document.all) {
posLeft = document.all["myElement"].style.left;
}

Now you can change the position, and reset the property in a similar way.

HINT: if the property includes units, it will be returned as a string: "200px". You will need to parse out the numeric part, then change it, then re-add the units to make it a string again, then reset the property.

isitreal

3:48 am on Mar 22, 2004 (gmt 0)

The code as posted didn't work. Is there a mistake in your code purpleMartin? No value is being returned, that's exactly the problem I had when I tried to do this before. Here's the test page:

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#test1 {top:23px;left:46px;width:20px;height:20px;background-color:blue;}
</style>
</head>
<body>
<div id="test1"></div>

</body>

</html>

Purple Martin

5:07 am on Mar 22, 2004 (gmt 0)

Firstly: your div isn't where you want it because you forgot to specify position:absolute; - however this isn't the cause of your problem.

I tried the code, and sure enough nothing was returned. Then I specified the left style inline in the div tag, and the expected value was returned. But that's not what you need!

So instead of .style.left I tried .offsetLeft, and that's the solution. Be aware that offsetLeft gives the left position relative to the containing element - so if your element is nested inside another, you may also need to get the position of it's parent: you can do this with a reference to the inside element's offsetParent property.

isitreal

5:36 pm on Mar 22, 2004 (gmt 0)

PurpleMartin: Good, if you can't come up with an elegant solution, I don't feel bad for giving up on this.

The offset method sort of works for top, left, width, height, not for right and bottom, that's definitely better than nothing.

But, it's not that simple apparently, as I now remember after looking it up. If you take a look at Danny Goodman's 'Dynamic HTML' on O'Reilly press, chapter 9, page 472, you'll find that even this is not actually a solution due to serious cross browser discrepencies in the returned values.

So that's 4 of about 100 possible css values we can now get a sort of randomly vague existing values for, I was hoping that there was something that might actually really give the values in all cases, but I guess there isn't.

Rambo Tribble

2:37 am on Mar 23, 2004 (gmt 0)

However, since the stated goal is to move an iframe, which should be treated by JS as a window, might Window.moveBy() achieve the desired effect?

Purple Martin

2:49 am on Mar 23, 2004 (gmt 0)

I wouldn't have thought so. That could be used to move the outside browser window, but in this case we want to move the parent document's iframe element (which as you say does contain a window) therefore it is the same as moving any other element in that document.

Rambo Tribble

5:13 am on Mar 23, 2004 (gmt 0)

Right, but from within the iframe shouldn't JS see the iframe as its window? Granted, if the contents of the iframe are out of the author's control, that might prove a bit of a trick.