HTML DOM Element offsetTop 속성

정의 및 사용법

offsetTop 속성은 부모에 대한 상단 위치를 픽셀로 반환합니다. 이 속성은 읽기 전용입니다.

반환 값은 다음을 포함합니다:

  • 요소의 상단 위치 및 여백
  • 부모의 상단 내간격, 스크롤 바 및 경계선

참조:CSS 프레임워크 튜토리얼

offsetParent

모든 블록 요소는 위치 부모에 대한 이동량을 보고합니다:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

위치 부모는 가장 가까운 비정적 위치를 가진 조상입니다.

위치 부모가 없으면, 이동량은 문서 본문에 대한 것이 됩니다.

다른 내용 참조:

offsetLeft 속성

offsetWidth 속성

offsetHeight 속성

offsetParent 속성

clientTop 속성

clientLeft 속성

clientWidth 속성

clientHeight 속성

예제

예제 1

"myDIV"의 offsetTop 위치를 가져오기:

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

직접 테스트해보세요

예제 2

"myDIV"의 위치를 가져오기:

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

직접 테스트해보세요

예제 3

sticky 네비게이션 바 생성:

// 네비게이션 바를 가져옵니다
const navbar = document.getElementById("navbar");
// 네비게이션 바의 위치를 가져옵니다
const sticky = navbar.offsetTop;
// 해당 스크롤 위치에 도달하면 sticky 클래스를 네비게이션 바에 추가하고, 스크롤 위치를 벗어났을 때 sticky 클래스를 제거합니다.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

직접 테스트해보세요

문법

top offset 위치를 반환하십시오:

element.offsetTop

반환 값

타입 설명
숫자 픽셀을 기준으로 요소의 상단 위치.

브라우저 지원

모든 브라우저가 지원합니다 element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 지원 지원 지원 지원 지원