JS에서 DOM 요소의 위치를 ​​얻는 방법

이번에는 JS에서 DOM 요소의 위치를 ​​얻는 방법을 보여 드리겠습니다. JS에서 DOM 요소의 위치를 ​​얻는 주의 사항은 다음과 같습니다.

페이지 스크롤 및 애니메이션을 실행할 때 이 글의 왼쪽에 있는 플로팅 탐색과 같은 DOM 요소의 절대 위치를 얻는 경우가 많습니다. 페이지가 해당 페이지로 스크롤되면 정상적으로 문서 흐름에 렌더링됩니다. 페이지가 해당 위치를 벗어나 스크롤되면 항상 왼쪽으로 떠 있게 됩니다.

이 문서에서는 DOM 요소의 절대 위치를 얻는 다양한 방법과 해당 호환성을 자세히 설명합니다. DOM 요소 높이 및 스크롤 높이를 얻는 방법에 대한 자세한 내용은 뷰포트의 너비, 높이 및 스크롤 높이 문서를 참조하세요.

Overview

다음은 참조용으로 이 문서에 포함된 API에 해당하는 문서 및 표준입니다.

clientTop.getBoundingClientRect().getClients () .getComputemle ()

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()

조상 요소 절대 위치위치:absolute/fixed, <code>offsetTop은 이 요소를 기준으로 합니다. 따라서 문서 상단을 기준으로 높이 차이를 얻으려면 재귀적으로 호출해야 합니다. 🎜

// 以下代码来自： 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!'

🎜el.offsetParent는 현재 요소의 위치 지정 컨테이너(위치 지정 컨테이너)입니다. 현재 요소에 절대 위치의 조상 노드가 없으면 이 속성의 값은 null입니다. 🎜🎜호환성 및 제한 사항: 이 속성은 거의 모든 브라우저에서 지원됩니다. 요소가 숨겨진 경우 해당 값은 0이지만 IE9에서는 아무런 영향을 미치지 않습니다. 🎜🎜🎜🎜clientTop/clientLeft🎜🎜🎜🎜이름에 오해하지 마세요. Element.clientTop은 현재 요소의 🎜상단 테두리 너비🎜의 정수 값을 나타냅니다. getCompulatedStyle()에서 반환된 border-top-width 속성의 반올림된 값과 항상 동일합니다. 🎜🎜왜? DOM 용어에서 클라이언트는 테두리(패딩+콘텐츠 크기를 제외하고 항상 렌더링 상자를 참조합니다. ). 오프셋은 항상 테두리(테두리 + 패딩 + 콘텐츠 크기)를 포함하는 렌더링 상자를 참조하며 clientTop은 두 Top의 차이, 즉 테두리 너비를 나타냅니다. 상자 개념은 CSS 표시 속성 및 상자 모델🎜🎜호환성을 참조하세요. 제한 사항: offsetTop/offsetLeft🎜🎜.🎜🎜getBoundingClientRect()🎜🎜🎜🎜Element.getBoundingClientRect()와 동일합니다. 요소의 크기와 뷰포트를 기준으로 한 위치를 가져오고 DOMRect 객체를 반환합니다. 🎜rrreee🎜문서의 왼쪽 상단 모서리를 기준으로 위치를 얻으려면 위의 상단 및 왼쪽 위에 스크롤 위치를 추가해야 합니다. 다음 코드는 MDN에서 가져온 것이며 거의 모든 브라우저와 호환됩니다. 🎜rrreee🎜호환성 및 제한 사항: CSSOM 보기 모듈의 기능이기도 하지만 거의 모든 브라우저와 호환됩니다. 🎜🎜https://caniuse.com/#feat=getboundingclientREC IE에서는 하단 창의 왼쪽 상단이 그렇지 않을 수 있습니다. 0,0은 0,0입니다. 🎜rrreee🎜🎜🎜.getClientRects()🎜🎜🎜🎜Element.getClientRects()는 IE9의 모든 CSS 상자 모델에 해당하는 DOMRect 컬렉션을 얻는 데 사용됩니다. DOM 요소. 🎜🎜블록 수준 요소인 경우 반환된 세트에는 블록의 크기와 위치인 요소가 하나만 있어야 합니다. 그러나 인라인 요소(또는 SVG 내의 요소)인 경우 해당 요소 내의 모든 CSS 상자가 반환됩니다. 예를 들어 기본적으로 래핑되는 일반 <span>는 다음과 같습니다. 🎜rrreee🎜이 <span>에는 세 줄이 있으며 세 번째 줄의 길이는 더 짧습니다. 각 줄 바꿈이 새로운 CSS 상자를 형성할 때마다. 🎜🎜호환성 및 제한 사항: IE8 이하에서는 IE의 고유한 TextRectangle 개체(ClientRect 대신)가 반환됩니다. 이 개체에는 너비가 없습니다. > 및 height 속성이 있으며 속성을 설정할 수 없습니다. 참조: https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/🎜🎜🎜🎜.getCompulatedStyle()🎜🎜🎜🎜Window.getCompulatedStyle()은 요소의 계산된 모든 CSS 속성을 가져올 수 있습니다. 단순 절대 위치 지정 요소의 경우 이 API에서 반환하는 top, left 및 기타 속성 값을 통해 요소의 위치를 ​​얻을 수 있습니다. 예: 🎜rrreee🎜.getCompulatedStyle() 의사 요소의 크기 및 위치와 같은 스타일 정보를 얻는 데 유용한 사용법도 있습니다. 🎜

// 以下代码来自： 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 这样的 CSS 关键字。

总结 获取 DOM 元素相对于文档的位置，可以直接使用 offsetTop； 获取 DOM 元素相对于视口的位置，可以使用 .getBoundingClientRect()； 获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 .getClientRects()； 获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 .getComputedStyle()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular4性能优化方法总结

jQuery+ajax动态操作表格tr td步骤详解

offsetTop	relative 컨테이너 위치	MDN	CSSOM 보기 모듈
상단 테두리 너비	MDN	CSSOM 보기 모듈
뷰포트를 기준으로 요소 크기 및 위치	MDN	CSSOM 보기 모듈
모든 하위 상자 상자의 크기 및 위치	mdn	cssom 보기 모듈
CSS 속성	MDN	DOM 레벨 2 스타일 CSSOM

위 내용은 JS에서 DOM 요소의 위치를 ​​얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!