Javascript is used to get the exact location of the page element

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

The following tutorial summarizes Javascript's knowledge of web page location.

The size of the web page and the size of the browser window

First, make two basic concepts clear.

The total area of a web page is its size. Typically, the size of a web page is determined by the content and the CSS stylesheet.

The size of the browser window is the area of the page you see in the browser window, also known as the viewport.

Obviously, if the contents of the page are fully displayed in the browser window (i.e. no scrollbars), then the size of the page is the same as the size of the browser window. If you can't display it all, scroll through the browser window to display the various sections of the page.

Get the size of the page

Each element on the page has the clientHeight and clientWidth properties. These two attributes refer to the amount of visual area occupied by the content part of the element plus the padding, excluding the space occupied by the border and scroll bar.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312091712081.gif? 2013119171231 ">  
(figure 1 clientHeight and clientWidth properties)

Therefore, the clientHeight and clientWidth attributes of the document element represent the size of the page.

 
　　function getViewport(){ 
　　　　if (document.compatMode == "BackCompat"){ 
　　　　　　return { 
　　　　　　　　width: document.body.clientWidth, 
　　　　　　　　height: document.body.clientHeight 
　　　　　　} 
　　　　} else { 
　　　　　　return { 
　　　　　　　　width: document.documentElement.clientWidth, 
　　　　　　　　height: document.documentElement.clientHeight 
　　　　　　} 
　　　　} 
　　} 

The getViewport function above returns the height and width of the browser window. There are three points to note when using:

1) this function cannot be run until the page is loaded, otherwise the browser will report an error before the document object is generated.

2) in most cases, it is the document. The documentElement. ClientWidth return the correct value. In IE6 quirks mode, however, the document. The body. The clientWidth return the correct value, so the function of joined the document mode of judgment.

3) clientWidth and clientHeight are read-only properties and cannot be assigned values.
Another way to get the page size

Each element on the page also has the scrollHeight and scrollWidth attributes, which refer to the visual area of the element, including the scroll bar.

So, the scrollHeight and scrollWidth properties of the document object are the size of the page, which means all the lengths and widths that the scroll bar rolls over.

The getPagearea() function can be written out like the getViewport() function.

 
　　function getPagearea(){ 
　　　　if (document.compatMode == "BackCompat"){ 
　　　　　　return { 
　　　　　　　　width: document.body.scrollWidth, 
　　　　　　　　height: document.body.scrollHeight 
　　　　　　} 
　　　　} else { 
　　　　　　return { 
　　　　　　　　width: document.documentElement.scrollWidth, 
　　　　　　　　height: document.documentElement.scrollHeight 
　　　　　　} 
　　　　} 
　　} 

However, there is a problem with this function. If the content of the page is fully displayed in the browser window without scrollbars, then the page's clientWidth and scrollWidth should be equal. But in practice, the two values may not be the same because different browsers have different processing. So we need to take the larger of them, so we'll rewrite the getPagearea() function.

 
　　function getPagearea(){ 
　　　　if (document.compatMode == "BackCompat"){ 
　　　　　　return { 
　　　　　　　　width: Math.max(document.body.scrollWidth, 
　　　　　　　　　　　　　　　　document.body.clientWidth), 
　　　　　　　　height: Math.max(document.body.scrollHeight, 
　　　　　　　　　　　　　　　　document.body.clientHeight) 
　　　　　　} 
　　　　} else { 
　　　　　　return { 
　　　　　　　　width: Math.max(document.documentElement.scrollWidth, 
　　　　　　　　　　　　　　　　document.documentElement.clientWidth), 
　　　　　　　　height: Math.max(document.documentElement.scrollHeight, 
　　　　　　　　　　　　　　　　document.documentElement.clientHeight) 
　　　　　　} 
　　　　} 
　　} 

Four, get the absolute location of the page elements

The absolute position of a page element, referring to the coordinates of the upper left corner of the element relative to the upper left corner of the entire page. This absolute position has to be calculated.

First, each element has the offsetTop and offsetLeft attributes, representing the distance between the upper-left corner of the element and the upper-left corner of the parent container. So, just add these two values together to get the absolute coordinates of the element.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312091714103.gif? 2013119171424 ">  
(figure 2 offsetTop and offsetLeft properties)

The following two functions can be used to obtain the absolute position of the abscissa and the ordinate.

 
　　function getElementLeft(element){ 
　　　　var actualLeft = element.offsetLeft; 
　　　　var current = element.offsetParent; 

　　　　while (current !== null){ 
　　　　　　actualLeft += current.offsetLeft; 
　　　　　　current = current.offsetParent; 
　　　　} 

　　　　return actualLeft; 
　　} 

　　function getElementTop(element){ 
　　　　var actualTop = element.offsetTop; 
　　　　var current = element.offsetParent; 

　　　　while (current !== null){ 
　　　　　　actualTop += current.offsetTop; 
　　　　　　current = current.offsetParent; 
　　　　} 

　　　　return actualTop; 
　　} 

Since the offsetParent object does not necessarily equal the parent container in tables and iframes, the above function does not apply to elements in tables and iframes.

Get the relative position of the page elements

The relative position of a web page element, referring to the coordinates of the upper left corner of the element relative to the upper left corner of the browser window.

Once you have the absolute position, it's easy to get the relative position by subtracting the distance of the page's scroll bar from the absolute coordinates. The vertical distance of the scroll bar is the scrollTop attribute of the document object. The horizontal distance of the scroll bar scrolling is the scrollLeft property of the document object.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312091713182.gif? 2013119171336 ">  
(figure 3 scrollTop and scrollLeft properties)

Rewrite the two functions in the previous section:

 
　　function getElementViewLeft(element){ 
　　　　var actualLeft = element.offsetLeft; 
　　　　var current = element.offsetParent; 

　　　　while (current !== null){ 
　　　　　　actualLeft += current.offsetLeft; 
　　　　　　current = current.offsetParent; 
　　　　} 

　　　　if (document.compatMode == "BackCompat"){ 
　　　　　　var elementScrollLeft=document.body.scrollLeft; 
　　　　} else { 
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　} 

　　　　return actualLeft-elementScrollLeft; 
　　} 

　　function getElementViewTop(element){ 
　　　　var actualTop = element.offsetTop; 
　　　　var current = element.offsetParent; 

　　　　while (current !== null){ 
　　　　　　actualTop += current. offsetTop; 
　　　　　　current = current.offsetParent; 
　　　　} 

　　　　 if (document.compatMode == "BackCompat"){ 
　　　　　　var elementScrollTop=document.body.scrollTop; 
　　　　} else { 
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　} 

　　　　return actualTop-elementScrollTop; 
　　} 

The scrollTop and scrollLeft attributes are assignable and automatically scroll the page to its location immediately, so you can use them to change the relative position of the page elements. In addition, the element.scrollintoview () method has a similar effect by making a web page element appear in the upper-left corner of a browser window.

A quick way to get the element position

In addition to the above functions, there is a quick way to get the location of a page element right away.

That is to use the getBoundingClientRect() method. It returns an object with four attributes, left, right, top, and bottom, that correspond to the distance between the upper left and lower right corners of the element and the upper left corner of the browser window.

So, the relative position of the page elements is

 
　　var X= this.getBoundingClientRect().left; 

　　var Y =this.getBoundingClientRect().top; 

If you add the distance, you get the absolute position

 
　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; 

　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop; 

Currently, IE, Firefox 3.0+, and Opera 9.5+ all support this method, while Firefox 2.x, Safari, Chrome, and Konqueror do not.