JavaScriptを使ってDOM要素の位置とサイズを取得する方法_基礎知識

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。

基础概念

为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

これらのプロパティを理解するには、HTML 要素の実際のコンテンツが、コンテンツを収容するために割り当てられたボックスよりも大きい可能性があるため、コンテンツ領域が実際のビューポートに表示される可能性があることを知る必要があります。コンテンツがビューポートより大きい これを行うときは、要素のスクロール バーの位置を考慮する必要があります。

1. clientHeight と clientWidth は要素の内部サイズを記述するために使用されます。これは、要素のコンテンツ、境界線 (実際には IE に含まれる) を除く内部マージン、マージン、およびスクロール バー部分のサイズを指します

2. offsetHeight と offsetWidth は、要素の外側のサイズを記述するために使用されます。これは、外側のマージンとスクロール バー部分を除く、要素のコンテンツ、内側のマージン、境界線を指します

3. clientTop と clientLeft は、パディングの端と境界線の外側の端の間の水平方向と垂直方向の距離、つまり左と上の境界線の幅を返します。

4. offsetTop と offsetLeft は、要素の左上隅 (境界線の外端) と、配置された親コンテナー (offsetParent オブジェクト) の左上隅の間の距離を表します。

5. offsetParent オブジェクトは、要素の最後に配置された (相対、絶対) 祖先要素を参照し、再帰的に遡ります。祖先要素が配置されていない場合は、null が返されます

理解しやすいように小さな例を書いてください

コードをコピーします コードは次のとおりです:

var div = document.getElementById('divDisplay'); var clientHeight = div.clientHeight; var clientWidth = div.clientWidth; div.innerHTML = 'clientHeight: ' clientHeight '
'; div.innerHTML = 'client幅: ' clientWidth '
';

var clientleft = div.ClientLeft;

var clienttop = div.clienttop;
DIV.Innerhtml = 'Clientleft' & lt; Iv.innerhtml = 'ClientTop '
';
var offsetHeight = div.offsetHeight;

var offsetWidth = div.offsetWidth;
div.innerHTML = 'offsetHeight: ' offsetHeight '
';
div.innerHTML = 'offset幅: ' offsetWidth '
';

var OffsetLeft = div.offsetLeft;

var officialtop = div.Offsettop;
Div.Innerhtml = 'OffSetleft' & LT; DIV.Innerhtml : ' offsetTop '
';

var offsetParent = div.offsetParent;

div.innerHTML = 'offsetParent: ' offsetParent.id '
';

効果は写真の通りです

この図から、clientHeight が上下に 10 ピクセルのパディングを備えた div の高さであることがわかります。これは clientWidth

にも当てはまります。

clientLeft と ClientTop は div の左と上の境界線の幅です

offsetHeight は、clientHeight の上下の 3 ピクセルの境界線の幅の合計です。offsetWidth

についても同様です。

offsetTop は div 30px maggin offsetparent 8px パディング、offsetLeft は同じです

6. スクロール幅とスクロール高さは、要素のコンテンツ領域にパディングとオーバーフロー サイズを加えたもので、コンテンツがオーバーフローなしでコンテンツ領域と正確に一致する場合、これらのプロパティは clientWidth と clientHeight と等しくなります。

7.scrollLeftとscrollTopは要素のスクロールバーの位置を参照し、書き込み可能です

理解するために、以下に簡単な例を書いてください

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

コードをコピーします

コードは次のとおりです: var divP = document.getElementById('divParent'); var divD = document.getElementById('divDisplay');

varscrollHeight = divP.scrollHeight;
varscrollWidth = divP.scrollWidth;
divD.innerHTML = 'scrollHeight: 'scrollHeight '
';
divD.innerHTML = 'scrollWidth : 'scrollWidth '
';

FireFox および IE10 (IE10 より前のバージョン) では、ボックス モデルは議論の余地なく W3C 標準と一致しません。 、互換性の問題については以下で紹介します) と、結果は、scrollHeight: 494 が得られますが、Chrome と Safari では、結果は、scrollHeight: 502 が得られます。これは、8 に基づいて、単純に推測できます。 divParent のパディングが
であるかどうかを計算してみましょう。
結果がどのようにして得られるのかがわかります。まず、scrollHeight には、divDisplay で必要な高さ、高さ 400 ピクセル、上下 10 ピクセルのパディング、上下 3 ピクセルの境界線、およびマージンが含まれている必要があります。上下30pxなので

400 10*2 3*2 30*2=486
このように、486 8=494、486 8*2=502 は実際に当てはまります。

FireFox と IE10 ではパディングは計算されません

。

これらの基本的な知識があれば、要素の位置とサイズを計算できます。

ドキュメントとビューポートを基準とした座標

DOM 要素の位置、つまり座標を計算する場合、ドキュメント座標とビューポート座標という 2 つの座標系が関係します。

私たちがよく使用するドキュメントは、ウィンドウの表示部分だけでなく、ウィンドウ サイズの制限によりスクロール バーが表示される部分も含めたページ部分全体です。その左上隅が相対原点と呼ばれるものです。ドキュメントの座標に合わせます。

ビューポートは、ドキュメントのコンテンツを表示するブラウザの一部であり、ブラウザのシェル (メニュー、ツールバー、ステータス バーなど)、つまり現在のウィンドウに表示されるページの部分は含まれません。スクロールバーを除く。

ドキュメントがビューポートより小さい場合、ドキュメントの左上隅がビューポートの左上隅と同じであることを意味します。一般に、2 つの座標系を切り替えるには、次のようにします。スクロールのオフセット (スクロール オフセット) を加算または減算する必要があります。

座標系間で変換するには、ブラウザ ウィンドウのスクロール バーの位置を決定する必要があります。これらの値は、IE 8 以前を除き、ウィンドウ オブジェクトの pageXoffset および pageYoffset によって提供されます。スクロール バーの位置は、scrollLeft 属性とscrollTop 属性を通じて取得することもできます。通常の状況では、これらの属性値はドキュメント ルート ノード (document.documentElement) をクエリすることで取得できますが、奇妙なモードではクエリする必要があります。文書の本文を通して。

コードをコピー

コードは次のとおりです:

function getScrollOffsets(w) {
var w = w || 左、d.documentElement.scrollTop };
>




コードをコピー


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

function getViewPortSize(w) {

var w = w || window;

if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; if ( document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; return { w: d.body.clientWidth, h: d .body.clientHeight }; }

ドキュメント座標


どの HTML 要素にも、要素の X 座標と Y 座標を返す offectLeft 属性と offectTop 属性があります。多くの要素では、これらの値はドキュメント座標ですが、要素とその他の一部の要素 (テーブル セル) の位置指定された子孫の場合は、 )、戻り値は祖先座標を基準とします。単純な再帰と累積によって計算できます

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

function getElementPosition(e) {

var x = 0, y = 0;

while (e != null) { x = e.offsetLeft; y = e, offsetTop; e = e.offsetPar ent; } return { x: このメソッドはスクロール バーなしでのみ使用できますが、この原理を使用して、親要素を基準としたいくつかの要素の座標を計算します。

ビューポート座標


ビューポート座標の計算は比較的簡単です。要素の getBoundingClientRect メソッドを呼び出すことができます。このメソッドは、left、right、top、bottom 属性を持つオブジェクトを返します。これらの属性は、ビューポートを基準とした要素の 4 つの位置の座標をそれぞれ表します。 getBoundingClientRect によって返される座標には、要素のパディングと境界線が含まれますが、外側のマージンは含まれません。非常に互換性があり、非常に使いやすい


要素サイズ


上記の座標計算方法から、要素のサイズを簡単に求めることができます。 W3C 標準に準拠したブラウザでは、getBoundingClientRect によって返されるオブジェクトには幅と高さも含まれますが、これらは元の IE には実装されていませんが、オブジェクトの左右と上下を返すことで簡単に計算できます。