フロントエンドインターフェイスでDOM要素の絶対位置を取得する方法

今回はフロントエンドインターフェースでDOM要素の絶対位置を取得する方法と、フロントエンドインターフェースでDOM要素の絶対位置を取得する方法の注意点について説明します。実際のケースを見てみましょう。

ページのスクロールやアニメーションを操作する場合、この記事の左側にあるフローティング ナビゲーションなど、DOM 要素の絶対位置が取得されることが多く、ページがスクロールするとドキュメント フローにレンダリングされます。ページはその位置を超えてスクロールします。ページは常に左に移動します。

この記事では、DOM 要素の絶対位置を取得するさまざまな方法と、対応する互換性について詳しく説明します。 DOM 要素の高さとスクロールの高さ を取得する方法については、記事「ビューポートの幅、高さ、スクロールの高さ」を参照してください。

概要

これらは、この記事に関係する API に対応するドキュメントと標準です。参考のために:

API	目的	ドキュメント	標準
オフセットトップ	コンテナの相対位置	MDN	CSSOM View Module
clientTop	上枠の幅	MDN	CSSOM View Module
.getBoundingClientRect()	ビューポートに対する要素のサイズと位置	MDN	CSSOM View Module
.getClients ()	すべてのサブボックスボックスのサイズと位置	mdn	cssom View Module
.getComputemle ()	CSS プロパティ	MDN	DOM レベル 2 スタイル CSSOM

offsetTop/offsetLeft

HTMLElement.offsetTop は、位置決めコンテナーを基準とした現在の要素 (上部の境界線を除く) の位置を取得するために使用されます。言い換えると、

すべての祖先要素が position:static; で静的に配置されている場合 (これがデフォルトの状況です)、 offsetTop はドキュメントの上部からの高さの差を表します。 (ドキュメントの上部がビューポートからスクロールアウトしている可能性があり、この高さがビューポートの高さよりも大きい可能性があります)。 position:static;（这是默认的情况），offsetTop 表示与文档最上方的高度差（文档最上方可能已经滚出视口，这个高度可能大于视口高度）。

如果存在绝对定位的祖先元素 position:absolute/fixed，offsetTop 就会相对于这个元素。因此为了获取相对于文档最上方的高度差，需要递归地调用：

function getOffsetTop(el){
 return el.offsetParent
  ? el.offsetTop + getOffsetTop(el.offsetParent)
  : el.offsetTop
}

el.offsetParent 是当前元素的定位容器（positioning container），如果当前元素没有绝对定位的祖先节点，这个属性的值就是 null。

兼容性和限制：几乎所有浏览器都支持该属性。如果元素被隐藏它的值就是 0，但在 IE9 下没有影响。

clientTop/clientLeft

不要被名字误导，Element.clientTop 是指当前元素的 上边框的宽度 的整数值。总是等于 getComputedStyle() 返回的 border-top-width 属性的四舍五入为整数后的值。

为什么呢？在 DOM 术语中，client 总是指除边框（border）外的渲染盒子（内边距+内容大小）。offset 总是指包含边框的渲染盒子（边框+内边距+内容大小），clientTop 即为这两者的 Top 之差，即边框宽度。盒子的概念请参考：CSS Display 属性与盒模型

兼容性和限制：同 offsetTop/offsetLeft

.getBoundingClientRect()

Element.getBoundingClientRect() 用于获取元素的大小，以及相对于视口（viewport）的位置，返回一个 DOMRect 对象。

> document.querySelector('span').getBoundingClientRect()
DOMRect {x: 2.890625, y: 218.890625, width: 1264, height: 110, top: 218.890625, …}
bottom: 328.890625
height: 110
left: 2.890625
right: 1266.890625
top: 218.890625
width: 1264
x: 2.890625
y: 218.890625

如果要获取相对于文档左上角的位置，需要在上述 top 和 left 的基础上再加滚动位置。如下代码来自 MDN，可兼容几乎所有浏览器：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

兼容性和限制：同样是 CSSOM View Module 的特性，但几乎兼容所有浏览器，可参考

https://caniuse.com/#feat=getboundingclientrectIE 下窗口的左上角可能不是 0,0，在 IE9 可以这样把它设置为 0,0：

<meta http-equiv="x-ua-compatible" content="ie=edge"/>

.getClientRects()

Element.getClientRects() 用来获得 DOM 元素中的所有CSS 盒模型 对应的 DOMRect 组成的集合。

如果是一个块级元素，返回的集合中应该只有一个元素，即这个块的大小和位置。但如果是一个行内元素（或者 SVG 内的元素），则会返回其中每个 CSS 盒子。比如一个普通的被默认折行的 <span>：

> document.querySelector('span').getClientRects()
DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, length: 5}
0: DOMRect {x: 2.890625, y: 262.890625, width: 1264, height: 22, top: 262.890625, …}
1: DOMRect {x: 2.890625, y: 284.890625, width: 1264, height: 22, top: 284.890625, …}
2: DOMRect {x: 2.890625, y: 306.890625, width: 768, height: 22, top: 306.890625, …}

这个 <span> 有三行，其中第三行的长度不足一行，每次折行都形成了一个新的 CSS 盒子。

兼容性和限制：在 IE8 及以下会返回 IE 独有的 TextRectangle 对象（而不是 ClientRect），这个对象不具有 width 和 height 属性，而且无法给它设置属性。参考：https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/

.getComputedStyle()

Window.getComputedStyle() 可以得到一个元素的所有计算后的 CSS 属性。对于简单的绝对定位元素，可以通过这个 API 返回的 top，left 等属性值获取元素的位置。例如：

let btn = document.querySelector('#btn-scroll-up')
let {top, left} = getComputedStyle(btn)
console.log('top:', top, 'left:', left)

.getComputedStyle() 还有一个有用的用法，获取伪元素的大小和位置等样式信息：

// 以下代码来自： https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
var h3 = document.querySelector('h3'); 
var result = getComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns ' rocks!'

兼容性和限制：.getComputedStyle() 几乎兼容所有浏览器，可参考 https://caniuse.com/#search=getComputedStyle。但它返回的值是 CSS 属性，用它获取绝对位置时要注意值的类型。例如 left 可能是 13px 这样的绝对值，也可能是 auto

絶対に配置された祖先要素 position:absolute/fixed がある場合、offsetTop はこの要素に対して相対的になります。したがって、ドキュメントの上部との相対的な高さの差を取得するには、次のように再帰的に呼び出す必要があります。 🎜rrreee🎜el.offsetParent は、現在の要素の位置決めコンテナー (位置決めコンテナー) です。現在の要素には絶対位置の祖先ノードがないため、この属性の値は null です。 🎜🎜互換性と制限: この属性は、ほぼすべてのブラウザーでサポートされています。要素が非表示の場合、その値は 0 ですが、IE9 では効果がありません。 🎜🎜🎜🎜clientTop/clientLeft🎜🎜🎜🎜名前に惑わされないでください。Element.clientTop は、現在の要素の🎜上枠幅🎜の整数値を指します。 getComputedStyle() によって返される border-top-width プロパティの四捨五入された値と常に等しくなります。 🎜🎜なぜですか？ DOM 用語では、クライアントは常に境界線を除いたレンダリング ボックス (パディング + コンテンツ サイズ) を指します。オフセットは常にボーダーを含むレンダリング ボックス (ボーダー + パディング + コンテンツ サイズ) を指し、clientTop は 2 つのトップの差、つまりボーダーの幅です。ボックスの概念については、CSS 表示属性とボックス モデルを参照してください。🎜🎜互換性と制限事項: offsetTop/offsetLeft🎜🎜.🎜🎜getBoundingClientRect() と同じ🎜🎜🎜🎜Element.getBoundingClientRect() は、要素のサイズとビューポートの相対位置。DOMRect オブジェクトを返します。 🎜rrreee🎜 ドキュメントの左上隅を基準とした相対位置を取得したい場合は、上記の top と left の上にスクロール位置を追加する必要があります。次のコードは MDN からのもので、ほぼすべてのブラウザーと互換性があります: 🎜rrreee🎜 互換性と制限事項: CSSOM View Module の機能でもありますが、ほぼすべてのブラウザーと互換性があります 🎜🎜https://caniuse を参照してください。 .com/#feat= getboundingclientrect の下のウィンドウの左上隅は 0,0 ではない場合があります。IE9 では、次のように 0,0 に設定できます: 🎜🎜🎜🎜Element .getClientRects() は、すべての DOM 要素を取得するために使用されます。CSS ボックス モデルに対応する DOMRect のコレクションです。 🎜🎜それがブロックレベルの要素である場合、返されるセットにはブロックのサイズと位置である要素が 1 つだけ存在する必要があります。ただし、インライン要素 (または SVG 内の要素) の場合は、その要素内のすべての CSS ボックスが返されます。たとえば、デフォルトでラップされる通常の <span> は次のようになります: 🎜rrreee🎜この <span> には 3 行があり、3 行目の長さは短くなります。毎回、改行ごとに新しい CSS ボックスが形成されます。 🎜🎜互換性と制限事項: IE8 以前では、IE 固有の TextRectangle オブジェクト (ClientRect の代わりに) が返されます。このオブジェクトには width がありません。 > および height プロパティ、およびそのプロパティを設定することはできません。参考: https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/🎜🎜🎜🎜.getComputedStyle()🎜🎜🎜🎜Window.getComputedStyle() は、要素の計算されたすべての CSS プロパティを取得できます。単純な絶対配置要素の場合、要素の位置は、この API によって返される top、left、およびその他の属性値を通じて取得できます。例: 🎜rrreee🎜.getComputedStyle() 疑似要素のサイズや位置などのスタイル情報を取得する便利な使用法もあります: 🎜rrreee🎜互換性と制限事項: .getComputedStyle () はほぼすべてのブラウザと互換性があります。https://caniuse.com/#search=getComputedStyle を参照してください。ただし、返される値は CSS プロパティです。これを使用して絶対位置を取得する場合は、値の型に注意する必要があります。たとえば、<code>left は、13px のような絶対値である場合もあれば、auto のような CSS キーワードである場合もあります。 🎜

概要: ドキュメントに対する DOM 要素の位置を取得します。これを直接使用できます offsetTop； 获取 DOM 元素相对于视口的位置，可以使用 .getBoundingClientRect()； 获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 .getClientRects()； 获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 .getComputedStyle()

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

推奨書籍:

JS での try-catch ステートメントとエラー タイプの使用

構成データをコードから分離する方法

以上がフロントエンドインターフェイスでDOM要素の絶対位置を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。