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 ページのサイズを表します。
次のようにコードをコピーします。
関数 getViewport(){
if (document.compatMode == "BackCompat"){
戻る {
幅: document.body.clientWidth、
高さ: document.body.clientHeight
}
} それ以外 {
戻る {
幅: document.documentElement.clientWidth、
高さ: document.documentElement.clientHeight
}
}
}
上記の getViewport 関数は、ブラウザ ウィンドウの高さと幅を返すことができます。使用する際の注意点は以下の3点です。
1) この関数は、ページがロードされた後に実行する必要があります。実行しないと、ドキュメント オブジェクトが生成されず、ブラウザーがエラーを報告します。
2) ほとんどの場合、document.documentElement.clientWidth は正しい値を返します。ただし、IE6のquirksモードではdocument.body.clientWidthが正しい値を返すため、関数にドキュメントモードの判定が追加されています。
3) clientWidth と clientHeight は両方とも読み取り専用のプロパティであり、値を割り当てることはできません。
3. Web ページのサイズを取得する別の方法
Web ページ上の各要素には、スクロール バーを含む要素の視覚領域を参照する、scrollHeight プロパティとscrollWidth プロパティもあります。
したがって、document オブジェクトのscrollHeight プロパティとscrollWidth プロパティは Web ページのサイズ、つまりスクロール バー全体の長さと幅を意味します。
getViewport() 関数に続いて、getPagearea() 関数を作成できます。
次のようにコードをコピーします。
関数 getPagearea(){
if (document.compatMode == "BackCompat"){
戻る {
幅: document.body.scrollWidth、
高さ: document.body.scrollHeight
}
} それ以外 {
戻る {
幅: document.documentElement.scrollWidth、
高さ: document.documentElement.scrollHeight
}
}
}
ただし、この機能には問題があります。 Web ページのコンテンツをスクロール バーなしでブラウザ ウィンドウに完全に表示できる場合は、Web ページの clientWidth とscrollWidth が等しい必要があります。しかし実際には、ブラウザごとに処理方法が異なり、これら 2 つの値は必ずしも同じではありません。したがって、それらのうち大きい方の値を取得する必要があるため、getPagearea()関数を書き直す必要があります。
次のようにコードをコピーします。
関数 getPagearea(){
if (document.compatMode == "BackCompat"){
戻る {
幅: Math.max(document.body.scrollWidth,
document.body.clientWidth)、
高さ: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} それ以外 {
戻る {
幅: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth)、
高さ: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. Web ページ要素の絶対位置を取得する
Web ページ要素の絶対位置は、Web ページ全体の左上隅を基準とした要素の左上隅の座標を指します。この絶対位置は計算により求めることができる。
まず、各要素には offsetTop 属性と offsetLeft 属性があり、要素の左上隅と親コンテナ (offsetParent オブジェクト) の左上隅の間の距離を表します。したがって、要素の絶対座標を取得するには、これら 2 つの値を累積するだけで済みます。
(図 2 offsetTop 属性と offsetLeft 属性)
絶対位置の横座標と縦座標を求めるには、次の 2 つの関数を使用できます。
次のようにコードをコピーします。
関数 getElementLeft(要素){
varactualLeft = element.offsetLeft;
var current = element.offsetParent;
while (現在の !== null){
実際の左 += 現在のオフセット左;
現在 = 現在のオフセット親;
}
実際の左を返します。
}
関数 getElementTop(要素){
varactualTop = element.offsetTop;
var current = element.offsetParent;
while (現在の !== null){
実際のトップ += 現在のオフセットトップ;
現在 = 現在のオフセット親;
}
実際のトップを返します。
}
テーブルと iframe では、offsetParent オブジェクトが親コンテナと必ずしも等しいわけではないため、上記の関数はテーブルと iframe の要素には適用されません。
5. Web ページ要素の相対位置を取得する
Web ページ要素の相対位置は、ブラウザ ウィンドウの左上隅を基準とした要素の左上隅の座標を指します。
絶対位置を使用すると、絶対座標からページのスクロールバーのスクロール距離を引くだけで相対位置を取得できます。スクロール バーの垂直方向の距離は、ドキュメント オブジェクトのscrollTop プロパティであり、スクロール バーの水平方向の距離は、ドキュメント オブジェクトのscrollLeft プロパティです。
(図 3 のscrollTop属性とscrollLeft属性)
前のセクションの 2 つの関数をそれに応じて書き換えます。
次のようにコードをコピーします。
関数 getElementViewLeft(要素){
varactualLeft = element.offsetLeft;
var current = element.offsetParent;
while (現在の !== null){
実際の左 += 現在のオフセット左;
現在 = 現在のオフセット親;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} それ以外 {
var elementScrollLeft=document.documentElement.scrollLeft;
}
実際の左要素ScrollLeftを返します。
}
関数 getElementViewTop(要素){
varactualTop = element.offsetTop;
var current = element.offsetParent;
while (現在の !== null){
実際のトップ += 現在のオフセットトップ;
現在 = 現在のオフセット親;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} それ以外 {
var elementScrollTop=document.documentElement.scrollTop;
}
実際のTop-elementScrollTopを返します。
}
scrollTop 属性とscrollLeft 属性には値を割り当てることができ、Web ページを対応する位置にすぐに自動的にスクロールするため、Web ページ要素の相対位置を変更するために使用できます。さらに、element.scrollIntoView() メソッドにも同様の効果があり、Web ページ要素をブラウザ ウィンドウの左上隅に表示できます。
6. 要素の位置を取得する簡単な方法
上記の機能に加えて、Web ページ要素の位置をすぐに取得する簡単な方法があります。
つまり、getBoundingClientRect() メソッドを使用します。これは、left、right、top、bottom の 4 つの属性を含むオブジェクトを返します。これらの属性は、ブラウザ ウィンドウ (ビューポート) の左上隅を基準とした要素の左上隅と右下隅の間の距離にそれぞれ対応します。 。
したがって、Web ページ要素の相対位置は次のようになります。
次のようにコードをコピーします。
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
スクロール距離に加えて、絶対位置を取得できます
次のようにコードをコピーします。
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
現在、IE、Firefox 3.0 以降、および Opera 9.5 以降はすべてこの方法をサポートしていますが、Firefox 2.x、Safari、Chrome、および Konqueror はサポートしていません。