In the process of creating a webpage, you sometimes need to know the exact position of an element on the webpage. In the following article, we will introduce how Javascript is used to create a webpage, you sometimes need to know the exact location of an element on a webpage.
The following tutorial summarizes the knowledge of Javascript in web page locating.
1. webpage size and browser window size
First, we need to clarify two basic concepts.
The whole area of a webpage is its size. Generally, the size of a webpage is determined by the content and CSS style sheet.
The size of the browser window refers to the area of the webpage seen in the browser window, also known as viewport ).
Obviously, if the content of a webpage can be displayed in all the browser windows (that is, no scroll bars appear), the size of the webpage is equal to that of the browser window. If not all are displayed, scroll through the browser window to display all parts of the webpage.
2. Obtain the webpage size
Each element on the webpage has the clientHeight and clientWidth attributes. These two attributes refer to the visual area occupied by the element content plus the padding, excluding 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 page size.
The Code is as follows:
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. Another method for obtaining the webpage size
Each element on the webpage has the scrollHeight and scrollWidth attributes, which indicate the visual area of the element, including the scroll bar.
Then, the scrollHeight and scrollWidth attributes of the document Object are the size of the webpage, which means all the lengths and widths of the scroll bar.
Similar to the getViewport () function, you can write the getPagearea () function.
The Code is as follows:
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. If the webpage content can be displayed in all browsers without a scroll bar, the clientWidth and scrollWidth of the webpage 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.
The Code is as follows:
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
The absolute position of a webpage element, which is the coordinate of the upper left corner of the element relative to the upper left corner of the whole webpage. This absolute position can be obtained only after calculation.
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.
The Code is as follows:
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
The relative position of the webpage element, which is the coordinate between the upper left corner of the element and the upper left corner of the browser window.
With the absolute position, it is easy to obtain the relative position, as long as the absolute coordinate minus the scroll distance of the page scroll. 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:
The Code is as follows:
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
The Code is as follows:
Var X = this. getBoundingClientRect (). left;
Var Y = this. getBoundingClientRect (). top;
The absolute position can be obtained by adding the scroll distance.
The Code is as follows:
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.
