How to use JavaScript to get the position of a page element

In the process of making a Web page, you sometimes need to know exactly where an element is on the page.

The following tutorial summarizes the knowledge of JavaScript in Web site positioning.

One, the size of the Web page and the size of the browser window

First, there are two basic concepts to be clarified.

The whole area of a Web page is its size. Typically, the size of a Web page is determined by the content and CSS stylesheets.

The size of the browser window refers to the area of the page that is seen in the browser window, also known as the Viewport (viewport).

Obviously, if the content of the Web page is displayed in the browser window (that is, not the scroll bar), the size of the Web page is equal to the size of the browser window. If you can't display all of them, scroll through the browser window to show the various parts of the page.

Second, get the size of the Web page

Each element on a Web page has clientheight and clientwidth attributes. These two attributes refer to the content portion of the element plus the visual area occupied by the padding, excluding the space occupied by the border and scrollbars.

(Figure ClientHeight and ClientWidth properties)

Therefore, the clientheight and clientwidth attributes of the document element represent the size of the Web page.

function GetViewport () {
if (Document.compatmode = = "Backcompat") {return
{
width:document.body.cl Ientwidth,
height:document.body.clientHeight
}
} else {return
{
width:documen T.documentelement.clientwidth,
height:document.documentElement.clientHeight
}
}
}

The GetViewport function above can return the height and width of the browser window. When used, there are three places to note:

1 This function must be completed after the page is loaded to run, otherwise the document object has not been generated, the browser will complain.

2 In most cases, the Document.documentElement.clientWidth returns the correct value. However, in the IE6 quirks mode, Document.body.clientWidth returns the correct value, so the function adds a judgment to the document pattern.

3 clientwidth and ClientHeight are read-only properties and cannot be assigned values.