javascript

Chapter 11: DOM Levels 2 and 3
implementations are slightly different. IE considers the upper - left corner of the document to be located
at (2,2), whereas the Firefox and Opera implementations use the traditional (0,0) as the starting
coordinates. This necessitates doing an initial check for the location of an element positioned at (0,0),
which will return (2,2) in IE and (0,0) in other browsers. Here is an example:
function getBoundingClientRect(element){
if (typeof arguments.callee.offset != “number”){
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement(“div”);
temp.style.cssText = “position:absolute;left:0;top:0;”;
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
}
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
This function uses a property on itself to determine the necessary adjustment for the coordinates. The
first step is to see if the property is defined and if not, define it. The offset is defined as the negative
value of a new element ’ s top coordinate, essentially setting it to – 2 in IE and – 0 in Firefox and Opera. To
figure this out, it requires creating a temporary element, setting its position to (0,0), and then calling
getBoundingClientRect() . The scrollTop of the viewport is subtracted from this value just in case
the window has already been scrolled when the method is called. Using this construct ensures that you
don ’ t have to call getBoundingClientRect() twice each time this function is called. Then, the method
is called on the element and an object is created with the new calculations.
For browsers that don ’ t support getBoundingClientRect() , the same information can be gained by
using other means. Generally, the difference between the right and left properties is equivalent to
offsetWidth , and the difference between the bottom and top properties is equivalent to
offsetHeight . Further, the left and top properties are roughly equivalent to using the
getElementLeft() and getElementTop() functions defined earlier in this chapter. A cross - browser
implementation of the function can be created as shown in the following example:
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if (element.getBoundingClientRect){
if (typeof arguments.callee.offset != “number”){
var temp = document.createElement(“div”);
temp.style.cssText = “position:absolute;left:0;top:0;”;
(continued)
341