JavaScript を使用してページ要素の特定の場所を取得する_JavaScript スキル

Web ページを作成する過程で、Web ページ上の要素の正確な位置を知る必要がある場合があります。

次のチュートリアルでは、Web ページの配置における Javascript の関連知識をまとめています。

1. Web ページのサイズとブラウザ ウィンドウのサイズ

まず、2 つの基本概念を明確にする必要があります。

Web ページの領域全体がそのサイズになります。通常、Web ページのサイズはコンテンツと CSS スタイル シートによって決まります。

ブラウザ ウィンドウのサイズは、ブラウザ ウィンドウに表示される Web ページの領域を指し、ビューポートとも呼ばれます。

Web ページのコンテンツをブラウザ ウィンドウに完全に表示できる (つまり、スクロール バーが表示されない) 場合は、Web ページのサイズとブラウザ ウィンドウのサイズは等しいことは明らかです。ページ全体を表示できない場合は、ブラウザ ウィンドウをスクロールして Web ページの一部を表示します。

2. Web ページのサイズを取得します

Web ページ上のすべての要素には clientHeight 属性と clientWidth 属性があります。これら 2 つの属性は、要素のコンテンツ部分とパディングによって占められる視覚領域を指します。ただし、境界線とスクロール バーによって占められるスペースは除きます。

(図 1 clientHeight 属性と clientWidth 属性)

したがって、 document 要素の clientHeight 属性と clientWidth 属性は Web ページのサイズを表します。

コードをコピー コードは次のとおりです。

function getViewport(){
if (document.compatmode == "backcompat") {
Return {
幅: Document.body.clientWidth,
高さ: Document.Clienttheigh
} Else { N> Return { 幅: document.documentedLement.clientWidth,
高さ: Document.documentedlement.clientheight
}
}


上記の port 関数はブラウザーのウィンドウの高さと幅を返すことができます。 。使用する際に注意する必要があることが 3 つあります:

1) この関数はページがロードされた後に実行する必要があります。そうしないと、ドキュメント オブジェクトが生成されず、ブラウザーがエラーを報告します。

2) ほとんどの場合、document.documentElement.clientWidth は正しい値を返します。ただし、IE6のquirksモードではdocument.body.clientWidthが正しい値を返すため、関数にドキュメントモードの判定が追加されています。

3) clientWidth と clientHeight は両方とも読み取り専用のプロパティであり、値を割り当てることはできません。

3. Web ページのサイズを取得する別の方法


Web ページの各要素には、Web ページの視覚領域を参照するscrollHeight 属性とscrollWidth 属性もあります。スクロールバーを含む要素。 ドキュメント オブジェクトのscrollHeightプロパティとscrollWidthプロパティはWebページのサイズ、つまりスクロールバー全体の長さと幅を意味します。

getViewport() 関数を真似て、getPagearea() 関数を作成できます。




コードをコピー

コードは次のとおりです。 Function getPagearea(){ if (document.compatmode == "backcompat") {

Return {

width: Document.body.scrollwidth,
Height: Document.body.ighheighheighry { Return {
width: document.documentElement .scrollWidth,
Height: document.documentElement.scrollHeight
}
}
}


しかし、この関数には問題があります。 Web ページのコンテンツをスクロール バーなしでブラウザ ウィンドウに完全に表示できる場合は、Web ページの clientWidth とscrollWidth が等しい必要があります。しかし実際には、ブラウザごとに処理方法が異なり、これら 2 つの値は必ずしも同じではありません。したがって、それらのうち大きい方の値を取得する必要があるため、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 {幅： Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
高さ: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}

四、获取网页元素の绝对位置
网页元素の绝对位置，指该元素の左上角相対

まず、各要素には、要素の左上角と親コンテナ (offsetParent オブジェクト) の左上角を示す 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 の要素に対する上の面の関数は使用できません。 ５、ネットワーク要素の相対位置


ネットワーク要素の相対位置を取得し、その要素の左上角が受話器の口の左上角に対する座標を指す。相対位置の取得は、ドキュメント オブジェクトの scrollTop プロパティであり、ドキュメント オブジェクトの scrollLeft プロパティであり、ドキュメント オブジェクトのスクロール レベルの距離だけを取得するだけで簡単に取得できます。


(図 3 の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 {

var elementScrollLeft=document.documentElement.scrollLeft;

}

returnactualLeft-elementScrollLeft;
}

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

while (current !== null){
actualTop = 現在。オフセット上;
current = current.offsetParent;
}

if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}

returnactualTop-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 a web page element 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 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

Copy the code The code is as follows:

var

Copy code

The code is 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, and Firefox 2.x, Safari, Chrome, and Konqueror are not supported.