In the process of making a web page, you sometimes need to know the exact location of an element on the web page.
The following tutorial summarizes the relevant knowledge of Javascript in web page positioning.
1. The size of the web page and the size of the browser window
First, two basic concepts must be clarified.
The entire area of a web page is its size. Typically, the size of a web page is determined by content and CSS style sheets.
The size of the browser window refers to the area of the web page seen in the browser window, also called the viewport.
Obviously, if the content of the web page can be fully displayed in the browser window (that is, no scroll bars appear), then the size of the web page and the size of the browser window are equal. If the entire page cannot be displayed, scroll the browser window to display portions of the web page.
2. Get the size of the web page
Every element on the web page has clientHeight and clientWidth attributes. These two attributes refer to the visual area occupied by the content part of the element plus padding, excluding the space occupied by the border and scroll bar.
(Figure 1 clientHeight and clientWidth properties)
Therefore, the clientHeight and clientWidth attributes of the document element represent the size of the web page.
Copy the code code as follows:
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 above getViewport function can return the height and width of the browser window. When using it, there are three things you need to pay attention to:
1) This function must be run after the page is loaded, otherwise the document object has not been generated and the browser will report an error.
2) In most cases, document.documentElement.clientWidth returns the correct value. However, in the quirks mode of IE6, document.body.clientWidth returns the correct value, so the judgment of the document mode is added to the function.
3) clientWidth and clientHeight are both read-only properties and cannot be assigned values.
3. Another way to get the size of a web page
Each element on the web page also has scrollHeight and scrollWidth properties, which refer to the visual area of the element including the scroll bar.
Then, the scrollHeight and scrollWidth properties of the document object are the size of the web page, which means the entire length and width of the scroll bar.
Following the getViewport() function, the getPagearea() function can be written.
Copy the code code as follows:
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 web page can be fully displayed in the browser window without scroll bars, then the clientWidth and scrollWidth of the web page should be equal. But in fact, different browsers have different processing methods, and these two values are not necessarily equal. Therefore, we need to take the larger value among them, so we need to rewrite the getPagearea() function.
Copy the code code 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.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. Obtain the absolute position of web page elements
The absolute position of a web page element refers to the coordinates of the upper left corner of the element relative to the upper left corner of the entire web page. This absolute position can be obtained through calculation.
First, each element has offsetTop and offsetLeft attributes, which represent 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 these two values to get the absolute coordinates of the element.
(Figure 2 offsetTop and offsetLeft attributes)
The following two functions can be used to obtain the abscissa and ordinate of the absolute position.
Copy the code code 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;
}
Since in tables and iframes, the offsetParent object is not necessarily equal to the parent container, the above function does not apply to elements in tables and iframes.
5. Obtain the relative position of web page elements
The relative position of a web page element refers to the coordinates of the upper left corner of the element relative to the upper left corner of the browser window.
With the absolute position, it is easy to obtain the relative position. Just subtract the scrolling distance of the page's scroll bar from the absolute coordinates. The vertical distance of the scroll bar is the scrollTop property of the document object; the horizontal distance of the scroll bar is the scrollLeft property of the document object.
(Figure 3 scrollTop and scrollLeft attributes)
Rewrite the two functions in the previous section accordingly:
Copy the code code 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.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 can be assigned values, and will automatically scroll the web page to the corresponding position immediately, so they can be used to change the relative position of web page elements. In addition, the element.scrollIntoView() method also has a similar effect, which can make the web page element appear in the upper left corner of the browser window.
6. A quick way to get the position of an element
In addition to the above functions, there is a quick way to get the position of web page elements immediately.
That is to use the getBoundingClientRect() method. It returns an object that contains four attributes: left, right, top, and bottom, which respectively correspond to the distance between the upper left corner and lower right corner of the element relative to the upper left corner of the browser window (viewport).
Therefore, the relative position of web page elements is
Copy the code code as follows:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
Plus the scrolling distance, you can get the absolute position
Copy the code code as follows:
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, but Firefox 2.x, Safari, Chrome, and Konqueror do not.