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

php中世界最好的语言
풀어 주다: 2018-04-27 10:50:13
원래의
4253명이 탐색했습니다.

이번에는 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/fixedoffsetTop 就会相对于这个元素。因此为了获取相对于文档最上方的高度差,需要递归地调用:

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
로그인 후 복사

如果要获取相对于文档左上角的位置,需要在上述 topleft 的基础上再加滚动位置。如下代码来自 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),这个对象不具有 widthheight 属性,而且无法给它设置属性。参考:https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/

.getComputedStyle()

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿