이 블로그는 DOM 요소의 사용을 보여줍니다. 클라이언트 높이 HTML에서.
HTML에서 DOM 요소 'clientHeight'를 사용하는 방법?
“ 클라이언트 높이 ” 속성을 사용하면 개발자가 요소의 표시 콘텐츠 높이를 계산할 수 있습니다. 요소를 서로 상대적으로 배치하거나 사용자가 스크롤 가능한 컨테이너의 오른쪽 가장자리로 스크롤했는지 여부를 확인하는 데 도움이 됩니다. 또한 웹페이지의 남은 미사용 공간에 대한 정보도 제공합니다.
예
'clientHeight' 속성의 더 나은 데모를 위한 예제를 살펴보겠습니다. 예를 들어, ' 온 클릭 ” 이벤트 리스너는 “ 클라이언트 높이 ' 재산:
< 몸 >
< h2 ID = '요소' >< / h2 >
< h2 ID = '요소' 온 클릭 = 'showelement높이()' >
높이를 표시하려면 Linuxhint 기사를 클릭하십시오!
< / h2 >
< 스크립트 >
함수 showelementHeight() {
var 예 = document.getElementById('요소');
var elementHeight= example.clientHeight;
alert('높이는 ' + elementHeight + ' 픽셀입니다.');
}
< / 스크립트 > >
< / 몸 >
위의 코드 스니펫에 대한 설명은 다음과 같습니다.
- 처음에는 ' ' 안의 ' 태그 <몸> ” 태그를 지정하고 더미 데이터를 제공합니다. 또한 ' 요소 ”를 선택한 HTML 요소에 추가합니다.
- 다음으로 ' 온클릭() '를 호출하는 이벤트 리스너 showelement높이() ” 기능은 사용자가 “ ' 요소.
- 그런 다음 ' showelement높이() ' 함수는 '라는 이름의 변수를 생성합니다. 예 '는 id가 '인 HTML 요소의 인스턴스 역할을 합니다. 요소 '.
- 다음으로 '라는 다른 변수를 만듭니다. 요소 높이 '' 'clientHeight' 속성에서 제공하는 결과를 저장합니다.
- 그 후 '를 표시합니다. 요소 높이 '' 변수를 사용하여 경고 상자에 ' 알리다() ' 방법.
마지막으로 ' 스타일 지정을 위해 다음 CSS 속성을 추가합니다. h2 ' 요소:
< 스타일 >
#요소 {
여백: 20px;
패딩: 10px;
배경- 색상 : 다크시안;
키 : 300px;
텍스트- 맞추다 : 센터;
선- 키 : 100px;
}
< / 스타일 >
위의 코드 스니펫에서 다음 CSS 속성은 id가 '인 div에 할당됩니다. 요소 ”:
- “ 20픽셀 ”, “ 10px ' 그리고 ' 다크시안 ' 값은 CSS '에 제공됩니다. 여유 ”, “ 심 ' 그리고 ' 배경색 ” 속성, 각각.
- '도 활용한다. 키 ”, “ 텍스트 정렬 ' 그리고 ' 선 높이 ” 사용자 가시성을 향상시키는 CSS 속성.
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
사용자가 요소를 클릭할 때마다 선택한 요소의 높이가 경고 상자에 표시된다는 출력 결과가 표시됩니다.
결론
'를 활용하려면 클라이언트 높이 ” 속성은 HTML에서 id 속성에 접근하여 HTML 요소를 선택합니다. 그런 다음 'clientHeight' 속성을 첨부하고 결과를 표시합니다. 읽기 전용 속성이며 결과를 픽셀 단위로 반환합니다. 'clientHeight' 속성은 '