Code to get the position of page elements using Javascript_javascript skills

下面的教程总结了Javascript在网页定位方面的相关知识。

一、网页的绝对大小和相对大小

首先，要明确两个基本概念。

一张网页的全部面积，就是它的绝对大小。通常情况下，网页的绝对大小由内容和CSS样式表决定。

网页的相对大小则是指在浏览器窗口中看到的那部分网页，也就是浏览器窗口的大小，又叫做viewport（视口）。

下图中央的方框就代表浏览器窗口，每次只能显示一部分网页。

（图一 网页的绝对大小和相对大小）

很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的绝对大小和相对大小是相等的。

二、获取网页的相对大小

网页上的每个元素，都有clientHeight和clientWidth属性，利用它们就可以得到网页的相对大小。这两个属性代表的大小，是指元素的内容部分再加上padding的大小，但是不包括border和滚动条占用的空间。

（图二 clientHeight和clientWidth属性）

因此，document元素的clientHeight和clientWidth属性，就代表了网页的相对大小。

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

上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候，有三个地方需要注意：
1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。
2）大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。
3）clientWidth和clientHeight都是只读属性，不能对它们赋值。

三、获取网页的绝对大小

document对象的scrollHeight和scrollWidth属性就是网页的绝对大小，意思就是滚动条滚过的所有长度和宽度。

仿照getViewport()函数，可以写出getPagearea()函数。

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

但是，这个函数有一个问题。前面说过，如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的绝对大小与相对大小应该相等，即 clientWidth和scrollWidth应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值，因此要对getPagearea()函数进行改写。

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

四、获取网页元素的绝对位置

由于网页大小有绝对和相对之分，所以网页元素的位置也有绝对和相对之分。网页元素的左上角相对于整张网页左上角的坐标，就是绝对位置；相对于浏览器窗口左上角的坐标，就是相对位置。

In Javascript language, the absolute coordinates of web page elements must be calculated. 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 3 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.

5. Obtain the relative position of web elements

After you have the absolute position of an element, it is easy to obtain the relative position. Just subtract the scrolling distance of the 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 4 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 {
🎜>
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 {
🎜>
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. Quick method to obtain element position

In addition to the above functions, there is also 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).

So, the relative position of web page elements is

var

Add the scrolling distance to get the absolute position

var

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

(End)