이 글은 JavaScript에서 'offsetTop' 속성의 작동에 대해 자세히 설명합니다.
HTML DOM 'offsetTop' 속성은 JavaScript에서 어떻게 작동합니까?
“ offsetTop ” 속성은 HTML 요소에서 작동하며 상위 요소의 '여백', 상단 '패딩', '테두리' 및 '스크롤 막대'도 반환합니다.
통사론
요소. offsetTop
이 구문에서 ' 요소 ”는 뷰포트(웹 페이지 콘텐츠가 표시되는 빈 영역)에 상대적인 특정 HTML 요소의 상단 위치를 나타냅니다.
메모: 반환된 값에는 다음이 포함됩니다.
- 상단 위치 및 요소의 여백.
- 부모의 위쪽 테두리, 스크롤바 및 패딩.
위 구문을 실제로 사용해 봅시다.
예: 'offsetTop' 속성을 적용하여 HTML 상단 위치 평가
이 예에서는 ' offsetTop ” 속성을 사용하여 특정 HTML 요소의 최상위 위치를 계산합니다. <사업부> ” 여백을 픽셀 단위로 포함합니다.
HTML 코드
먼저 다음 HTML 코드를 살펴봅니다.
< 사업부 ID = '사업부1' 스타일 = '상단:20px; 위치: 상대;여백:15px;테두리:3px 단색 청자색;텍스트 정렬:센터; 패딩:10px;' >< 비 > 세부 사항 이것 사업부는 : 비 >< br >
맨 위 : 20픽셀 < br >
위치 : 상대적인 < br >
텍스트 - 맞추다 : 센터 < br >
여유 : 15픽셀 < br >
국경 : 3px < br >
사업부 >< br >
< 버튼 클릭 = 'js펑크()' > 클릭하세요 단추 >
< 아이디 = '을 위한' > 피 >
위의 코드에서:
- “ <사업부> ” 요소는 '와 함께 명시된 ID 'Div1'을 가지고 생성됩니다. 스타일 ” 지정된 스타일 지정을 수행하는 속성입니다.
- 그 다음 “”의 본문 섹션은 명시된 정보를 지정합니다.
- 다음으로 '를 사용하여 버튼을 만듭니다. <버튼> ” 태그에 연결된 “ 온 클릭 ” 기능을 실행하는 이벤트 “ jsFunc() ” 버튼 클릭 시.
- 마지막으로 ' ” 태그는 “
” 요소의 계산된 상단 위치를 표시합니다.자바스크립트 코드
이제 주어진 JavaScript 코드를 고려하십시오.
< 스크립트 >
함수 jsFunc ( ) {
엘름트였다 = 문서. getElementById ( '사업부1' ) ;
여기서 txt = '계산된 OffsetTop은 다음과 같습니다. ' + elmnt. offsetTop + 'px
' ;
문서. getElementById ( '을 위한' ) . innerHTML = txt ;
}
스크립트 >위의 코드 라인에서:
- 함수는 '라는 이름으로 정의됩니다. jsFunc() '.
- 정의에서 변수 ' 느릅나무 '는 '로 선언됩니다. ~였다 ’를 활용한 키워드 getElementById() ” ID로 포함된 “div”에 액세스하는 방법 “ 사업부1 '.
- 그런 다음 ' offsetTop 'txt' 변수의 속성을 사용하여 가져온 'div'의 상단 위치를 픽셀 단위로 계산합니다.
- 마지막으로 “getElementById()”를 다시 적용하여 추가된 빈 단락에 접근하여 “” 요소의 계산된 최상위 위치 값을 “ innerHTML ' 재산.
산출
이 결과에서 주어진 div(마진 포함)의 최상위 위치, 즉 “ 35픽셀 ”는 지정된 메모(블로그 시작 부분)에 따라 계산되어 버튼 클릭 시 표시됩니다.
결론
자바스크립트는 ' offsetTop ” 속성을 사용하여 뷰포트를 기준으로 HTML 요소의 상단 위치를 계산합니다. 요소의 계산된 상단 위치를 정수 값으로 반환합니다. 픽셀 '. 이 글은 JavaScript에서 HTML DOM 요소 'offsetTop' 속성의 목적, 사용법 및 구현을 보여줍니다.