Entry

How do I access the same object in different browsers?

Aug 9th, 2000 03:23
Rey Nuņez,

There may be other ways, but this snippet works for IE4/5 and NN4/6.

el = document.all ? document.all[id] : document.getElementById ? 
document.getElementById(id) : document[id];

where el establishes the reference to the object with the given id. 
This snippet must be added as the first expression in any function that 
accepts at least one parameter (the element id). From then on, the 
object and its properties can be referenced in the following manner.

For example, to get the element's dimension and position:

<script language="JavaScript">
<!--
function getElProps(id){
el = document.all ? document.all[id] : document.getElementById ? 
document.getElementById(id) : document[id];
if (document.all || document.getElementById){
// for IE4+ and NN6
  elWidth = el.offsetWidth;
  elHeight = el.offsetHeight;
  elLeft = el.offsetLeft;
  elTop = el.offsetTop;
  }
else if (document.layers){
// for NN4
  elWidth = el.clip.width;
  elHeight = el.clip.height;
  elLeft = el.pageX;
  elTop = el.pageY;
  }
alert('Width: ' + elWidth + '\nHeight: ' + elHeight + '\nTop: ' + elTop 
+ '\nLeft: '+elLeft)
}
//-->
</script>

<div id="theDiv" style="position:relative">Hello I am a DIV</div>
<form><input type="Button" value="Get Props" onClick="getElProps
('theDiv')"></form>

Note: The DIV's position must explicitly be declared for it to be 
accessible in NN4.