JavaScript Instance Tutorial: Getting the true location and size of HTML elements

Article Introduction: using the style.left,style.top,style.width,style.height of HTML elements and the Width,height attribute, you cannot get the true position and size of the element, which takes out the original set values. For example, width= "500", then through the document.getElementById ("Table1″)." The value of the width is always 500, regardless of the table

Using the style.left,style.top,style.width,style.height of HTML elements and the Width,height attribute, you cannot get the true position and size of the element, which takes out the original set values. For example, width= "500", then through the document.getElementById ("Table1″). The value is always 500, regardless of whether the table has been propped up; The value obtained by document.getElementById ("Table1″") is empty because the value is not set.

To get the true location and size of the HTML element, you can only pass the Offsetleft,offsettop,clientwidth,clientheight,offsetwidth,offsetheight property, The offsetleft and offsettop respectively are the relative left coordinates and relative top coordinates of the current element in the parent element, to obtain the absolute coordinates, also need to use the offsetparent attribute, the modification attribute obtains the current element's parent element. To obtain absolute coordinates, you must sequentially obtain the relative coordinates of the parent element until the parent element is empty, and then add all the relative coordinates to get the absolute coordinates of the current element.

The most common is the date selection box, when the button is clicked when the pop-up date selection box is always next to the button, the selection box coordinates, is based on the button's coordinates and button offsetwidth,offsetheight to obtain.

—————————————————————————————————————————–
Htmlelement.offsetleft
Htmlelement.offsettop

Note, however, that the values stored by these two properties are not the absolute position of the element relative to the entire browser canvas, but rather the relative position relative to the position of its parent element, which means that the values are computed by the 0,0 point in the upper-left corner of the element. So how do you get an absolute position for an HTML element, a better function that you found a while ago, to share:

Get the ordinate of an element
function GetTop (e) {
var offset=e.offsettop;
if (e.offsetparent!=null) offset+=gettop (e.offsetparent);
return offset;
}
Get the horizontal axis of an element
function GetLeft (e) {
var offset=e.offsetleft;
if (e.offsetparent!=null) offset+=getleft (e.offsetparent);
return offset;
}

The principle is to take advantage of the Htmlelement.offsetparent attribute, if the current element's parent element is not NULL (NULL), then add the current offsettop based on the original offsettop, then continue to get the parent element's offsettop, then add it, and finally recursively The ordinate of the element relative to the entire browser canvas. The horizontal axis is the same.