Netscape 6, Part IV: DOM Differences and Commonalities with IE5.x : Referencing Objects - Doc JavaScript

Netscape 6, Part IV: DOM Differences and Commonalities with IE5.x

Referencing Objects

The worst habit to get rid of when scripting Netscape 6 is how you reference HTML objects. Internet Explorer has turned us into spoiled scripters. The following HTML tag, for example:

<P ID="foo"><I>Be sure to close this paragraph.</I></P>

renders as follows:

Be sure to close this paragraph.

We can reference this tag in Internet Explorer just by its ID. For example, to figure out its location we state:

foo.style.left

This does not work in Netscape 6. You cannot access objects just by their HTML ID. You need to use:

document.getElementById()

to find the object, and only then compute the object's properties. The following button calls handleClick() upon clicking:

Here is how we define the button:

<INPUT ID="button1" STYLE="position:relative; left:100px;
  visibility:visible;" TYPE="button" VALUE="Show My Location"
  onclick="handleClick()">

And here is how we define the handleClick() function:

<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick(){
  var obj = document.getElementById("button1");
  alert("horizontal position = " + obj.style.left);
}
// -->
</SCRIPT>

The following code works as well:

<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick(){
  alert("horizontal position = " +
    document.getElementById("button1").style.left);
}
// -->
</SCRIPT>

Next: How to create and remove attributes on the fly

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 15, 2001
Revised: January 15, 2001

URL: https://www.webreference.com/js/column75/5.html