Use Javascript to obtain the location of page elements-javascript skills

When creating a webpage, you sometimes need to know the exact position of an element on the webpage. The following tutorial summarizes the knowledge of Javascript in web page locating.

I. absolute size and relative size of webpages

First, we need to clarify two basic concepts.

The full area of a webpage is its absolute size. Generally, the absolute size of a webpage is determined by the content and CSS style sheet.

The relative size of a webpage refers to the part of the webpage seen in the browser window, that is, the size of the browser window, also known as viewport ).

The central box represents a browser window, and only a part of webpages can be displayed at a time.

(Absolute size and relative size of the webpage)

Obviously, if the content of a webpage can be displayed in all the browser windows (that is, the scroll bar is not displayed), the absolute size and relative size of the webpage are equal.

2. Obtain the relative size of the webpage

Each element on the webpage has the clientHeight and clientWidth attributes, so that the relative size of the webpage can be obtained. These two attributes indicate the size of the element content plus the padding size, but do not include the space occupied by border and the scroll bar.

(ClientHeight and clientWidth attributes)

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

Function getViewport (){
If (document. compatMode = "BackCompat "){
Return {
Width: document. body. clientWidth,
Height: document. body. clientHeight
}
} Else {
Return {
Width: document.doc umentElement. clientWidth,
Height: document.doc umentElement. clientHeight
}
}
}

The above getViewport function returns the height and width of the browser window. Note the following three points:
1) this function can only run after the page is loaded. Otherwise, the document object has not been generated and the browser reports an error.
The value 2XX indicates that document.doc umentElement. clientWidth returns the correct value. However, in the quirks mode of IE6, document. body. clientWidth returns the correct value. Therefore, the function adds a judgment on the document mode.
3) Both clientWidth and clientHeight are read-only attributes and cannot be assigned values.

3. Obtain the absolute size of the webpage

The scrollHeight and scrollWidth attributes of the document Object are the absolute size of the webpage, which means all the length and width of the scroll bar.

Similar to the getViewport () function, you can write the getPagearea () function.

Function getPagearea (){
If (document. compatMode = "BackCompat "){
Return {
Width: document. body. scrollWidth,
Height: document. body. scrollHeight
}
} Else {
Return {
Width: document.doc umentElement. scrollWidth,
Height: document.doc umentElement. scrollHeight
}
}
}

However, this function has a problem. As mentioned above, if the webpage content can be displayed in all the browser windows without a scroll bar, the absolute size of the webpage should be equal to the relative size, that is, the clientWidth and scrollWidth should be equal. But in fact, different browsers have different processing methods, and these two values may not be equal. Therefore, we need to take the larger value among them, so we need to 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.doc umentElement. scrollWidth,
Document.doc umentElement. clientWidth ),
Height: Math.max(document.doc umentElement. scrollHeight,
Document.doc umentElement. clientHeight)
}
}
}

4. Obtain the absolute position of webpage Elements

Because the webpage size has absolute and relative points, the webpage element location also has absolute and relative points. The coordinates in the upper left corner of a webpage element relative to the upper left corner of the webpage are absolute positions, and those in the upper left corner of the browser window are relative positions.

In Javascript, the absolute coordinates of web page elements can be obtained only through computation. Each element has the offsetTop and offsetLeft attributes, indicating the distance between the upper left corner of the element and the upper left corner of the parent container (offsetParent object. Therefore, you only need to accumulate the two values to obtain the absolute coordinates of the element.

(OffsetTop and offsetLeft attributes)

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

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;
}

In tables and iframe, The offsetParent object may not be the same as the parent container, so the above function is not applicable to elements in tables and iframe.

5. Obtain the relative location of webpage Elements

With the absolute position of an element, it is easy to obtain the relative position, as long as the absolute coordinate minus the scroll distance of the scroll bar. The vertical distance of the scroll bar is the scrollTop attribute of the document object, and the horizontal distance of the scroll bar is the scrollLeft attribute of the document Object.

(ScrollTop and scrollLeft attributes)

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.doc umentElement. 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.doc umentElement. scrollTop;
}

Return actualTop-elementScrollTop;
}

The scrollTop and scrollLeft attributes can be assigned values, and the page will be automatically rolled to the corresponding location immediately. Therefore, you can use them to change the relative location of the page element. In addition, the element. scrollIntoView () method has a similar effect, so that the webpage elements can appear in the upper left corner of the browser window.

6. Quick Method for getting element positions

In addition to the above functions, there is also a quick way to immediately obtain the location of web page elements.

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

Therefore, the relative position of the webpage element is

Var X = this. getBoundingClientRect (). left;

Var Y = this. getBoundingClientRect (). top;

The absolute position can be obtained by adding the scroll distance.

Var X = this.getboundingclientrect().left?document.doc umentElement. scrollLeft;

Var Y javasthis.getboundingclientrect().top?document.doc umentElement. scrollTop;

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

(End)