이 기사는 HTML의 실제 구현과 함께 DOM 요소 'clientTop'을 보여줍니다.
HTML에서 DOM 요소 'clientTop'을 사용하는 방법?
'clientTop' 속성은 웹 페이지를 생성하는 동안 HTML 요소의 레이아웃 및 위치 지정 작업에 유용합니다. 그 대가로 반응적이고 동적인 웹 사이트 레이아웃을 만드는 데 도움이 됩니다.
예
'clientTop' 속성을 더 잘 이해할 수 있도록 예를 들어 보겠습니다. 예를 들어, 다음 예에서는 상단 위치에서 테두리의 가중치가 평가됩니다.
< 몸 >
< h3 ID = '예' > 더 나은 설명을 위해 Linuxhint에서 제공한 기사 < / h3 >
< / 몸 >
먼저 '내부 <몸> ” 태그 생성 “ ” 태그를 지정하고 더미 데이터를 제공합니다. 또한 ' 예 ' 그것으로.
< 스타일 >
#예 {
국경 : 2px 솔리드 블랙;
패딩: 10px;
배경- 색상 : 밝은 회색;
}
< / 스타일 >
그 후 '내부 <스타일> ” 태그 선택 “ 예 ” id 값을 설정하고 “ 2px 솔리드 포레스트그린 ' 로 ' 국경 ' 재산. 또한 '를 사용하여 기본 스타일을 적용하십시오. 심 ' 그리고 ' 배경색 ” 더 나은 시각화 목적을 위한 속성.
위의 코드를 실행하면 다음과 같은 웹 페이지가 나타납니다.
출력은 div 및 h3 요소가 기본 스타일로 웹 페이지에 표시됨을 표시합니다.
'clientTop' 속성 사용
'를 사용하려면 클라이언트탑 ” 속성을 HTML 요소에 추가하려면 “ <스크립트> ” 태그. 이 코드 스니펫에 대한 설명은 다음과 같습니다.
< 스크립트 >예시였다 = 문서.getElementById ( '예' ) ;
var 상단 높이 = example.clientTop;
console.log ( '상단 테두리 높이:' + 탑높이 + 'px' ) ;
< / 스크립트 >
위의 코드 조각에서:
- 먼저 변수 ' 예 ”는 정보를 저장하거나 HTML 요소에 일부 작업을 적용하는 생성됩니다.
- 다음으로 “ 상단 높이 ” 변수는 “ 예 ' 변수와 ' 클라이언트탑 ' 재산.
- 마지막으로 '를 표시합니다. 상단 높이 ” 변수를 사용하여 콘솔에서 콘솔.로그() ' 방법.
위의 코드 조각을 실행하면 콘솔이 다음과 같이 나타납니다.
위의 출력은 선택한 요소에 대해 위쪽 테두리의 높이/무게가 콘솔에 픽셀 단위로 표시됨을 보여줍니다.
결론
“ 클라이언트탑 ” 속성은 테두리 및 패딩을 포함하여 HTML 요소의 전체 높이를 측정합니다. 'clientTop' 속성은 대화형 웹 페이지를 구축하는 데 도움이 되는 선택된 HTML 요소의 상단 위치에서 테두리 두께를 반환합니다. 이 기사에서는 HTML에서 DOM 요소 'clientTop'이 의미하는 바를 설명했습니다.