Get the position of page elements with Javascript
System process as the web page, you want to know the exact location of an element on the 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, we must clarify two basic concepts.
The entire area of a web page is its size. Normally, the size of a web page is determined by the content and CSS style sheet.
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 displayed in the browser window (that is, no scroll bar appears), then the size of the web page and the size of the browser window are equal. If it is not possible to display all of it, scroll the browser window to display all parts of the web page.
Second, get the size of the page
Each element on the web page has clientHeight and clientWidth properties. These two attributes refer to the visual area occupied by the content part of the element plus padding, excluding the space occupied by borders and scroll bars.
(Figure 1 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.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, there are three places 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) Both clientWidth and clientHeight are read-only properties, and values cannot be assigned to them.
Three, another way to get the size of the page
Each element on the webpage 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 all the length and width of the scroll bar.
Modeled on 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.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
}
}
}
However, this function has a problem. If the content of the web page can be 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, 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.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
Fourth, get 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 only be obtained by calculation.
First, each element has offsetTop and offsetLeft properties, which indicate 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.
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 may not be equal to the parent container, the above function is not applicable to elements in tables and iframes.
Five, get 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 very easy to obtain the relative position, just subtract the absolute coordinates from the scrolling distance of the page. 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:
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, and will automatically scroll the web page to the corresponding position immediately, so you can use them to change the relative position of the web page elements. In addition, the element.scrollIntoView() method has a similar effect, which can make web page elements appear in the upper left corner of the browser window.
Six, a quick way to get the position of the 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 correspond to the distance between the upper left corner and the lower right corner of the element relative to the upper left corner of the browser window (viewport).
So, the relative position of web page elements is
var X = this.getBoundingClientRect().left;
var Y = this.getBoundingClientRect().top;
Plus the scroll distance, you can 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+, Opera 9.5+ all support this method, but Firefox 2.x, Safari, Chrome, and Konqueror do not.
(over)