検索
ホームページウェブフロントエンドjsチュートリアルJavaScript を使用してページ要素の特定の場所を取得する_JavaScript スキル

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

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

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

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

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

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

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

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

Web ページ上のすべての要素には clientHeight 属性と clientWidth 属性があります。これら 2 つの属性は、要素のコンテンツ部分とパディングによって占められる視覚領域を指します。ただし、境界線とスクロール バーによって占められるスペースは除きます。
JavaScript を使用してページ要素の特定の場所を取得する_JavaScript スキル
(図 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 つの値を加算するだけで、その要素の相対座標が得られます。

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

複合生成コード

生成コードは次のようになります。 > 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、ネットワーク要素の相対位置


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


(図 3 のscrollTop プロパティと scrollLeft プロパティ)
上の 2 つの関数は、それぞれに対応する変更を実行します:


复制代


代码如下:

JavaScript を使用してページ要素の特定の場所を取得する_JavaScript スキル 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.
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン