Javascript_javascript スキルを使用してページ要素の位置を取得するコード

下面的教程总结了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)
　　　　　　}
　　　　}
　　}

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

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

JavaScript 言語では、Web ページ要素の絶対座標を計算する必要があります。各要素には offsetTop 属性と offsetLeft 属性があり、要素の左上隅と親コンテナ (offsetParent オブジェクト) の左上隅の間の距離を表します。したがって、要素の絶対座標を取得するには、これら 2 つの値を累積するだけで済みます。

(図 3 offsetTop 属性と offsetLeft 属性)

絶対位置の横座標と縦座標を求めるには、次の2つの関数を使用できます。

function getElementLeft(element){
varactualLeft = element.offsetLeft;
var current = element.offsetParent;

while (current !== null){
actualLeft = current.offsetLeft;
current = current.offsetParent;
}

returnactualLeft;
}

function getElementTop(element){
varactualTop = element.offsetTop;
var current = element.offsetParent;

while (current !== null){
actualTop = current.offsetTop;
current = current.offsetParent;
}

returnactualTop;
}

テーブルと iframe では、offsetParent オブジェクトが親コンテナと等しくない可能性があるため、上記の関数はテーブルと iframe の要素には適用できません。

5. Web 要素の相対位置を取得します

要素の絶対位置がわかったら、絶対座標からスクロール バーのスクロール距離を引くだけで相対位置を取得することができます。スクロール バーの垂直方向の距離は、ドキュメント オブジェクトのscrollTop プロパティであり、スクロール バーの水平方向の距離は、ドキュメント オブジェクトのscrollLeft プロパティです。

(図 4 のscrollTop属性とscrollLeft属性)

前のセクションの 2 つの関数を次のように書き換えます。

function getElementViewLeft(element){
varactualLeft = 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 {
🎜>
returnactualLeft-elementScrollLeft;

}

function getElementViewTop(element){

varactualTop = 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 {
🎜>
returnactualTop-elementScrollTop;
}

scrollTop 属性とscrollLeft 属性には値を割り当てることができ、Web ページを対応する位置に即座に自動的にスクロールするため、Web ページ要素の相対位置を変更するために使用できます。さらに、element.scrollIntoView() メソッドにも同様の効果があり、Web ページ要素をブラウザ ウィンドウの左上隅に表示できます。

6. 要素の位置を取得する簡単な方法

上記の機能に加えて、Web ページ要素の位置を即座に取得する簡単な方法もあります。 それは、getBoundingClientRect() メソッドを使用することです。これは、left、right、top、bottom の 4 つの属性を含むオブジェクトを返します。これらの属性は、ブラウザ ウィンドウ (ビューポート) の左上隅を基準とした要素の左上隅と右下隅の間の距離にそれぞれ対応します。

Web ページ要素の相対位置は

です。

変数

スクロール距離を加算して絶対位置を取得します

変数

現在、IE、Firefox 3.0、Opera 9.5 はすべてこの方法をサポートしていますが、Firefox 2.x、Safari、Chrome、Konqueror はサポートしていません。

(終了)