그만큼 오프셋 높이 JavaScript 프로그래밍 언어에서 사용되는 HTML DOM 속성입니다. 표시되는 콘텐츠의 높이, 테두리, 패딩 및 스크롤 막대가 있는 경우 요소의 표시 높이를 픽셀 단위로 반환합니다. offsetHeight는 offsetWidth 속성과 함께 사용되는 경우가 많습니다. 그만큼 오프셋 너비 offsetHeight와 거의 동일한 HTML DOM의 또 다른 속성입니다. 이러한 속성은 JavaScript에서 HTML 요소의 표시 높이와 너비를 찾는 데 사용됩니다.
offsetHeight는 다음 HTML 요소의 조합입니다.
offsetHeight = height + border + padding + horizontal scrollbar
반면, offsetWidth에는 다음 요소가 포함됩니다.
offsetWidth = width + border + padding + vertical scrollbar
offsetHeight 및 offsetWidth에는 여백이 포함되지 않으며 위쪽 여백이나 아래쪽 여백도 포함되지 않는다는 점을 기억하십시오. 이러한 DOM 속성은 다음에서 사용됩니다. 자바스크립트 프로그래밍 언어 HTML 요소의 크기를 픽셀 단위로 계산합니다.
아래 다이어그램의 도움으로 offsetHeight 및 offsetWidth를 훨씬 더 잘 이해할 수 있습니다.
브라우저 지원
offsetHeight DOM 속성은 Chrome 및 Internet Explorer와 같은 여러 웹 브라우저에서 지원됩니다. 다음은 offsetHeight 및 offsetWidth 속성을 지원하는 일부 브라우저입니다.
| 브라우저 |  크롬 |  인터넷 익스플로러 |  파이어폭스 |  오페라 |  원정 여행 |  가장자리 |
| 오프셋 높이 지원 | 예 | 예 | 예 | 예 | 예 | 예 |
통사론
다음은 offsetHeight의 간단한 구문입니다.
element.offsetHeight
여기서 요소는 CSS 속성 값 또는 HTML 텍스트 단락을 보유하기 위해 JavaScript에서 생성된 변수입니다.
반환 값
offsetHeight 및 offsetWidth는 각각 HTML 요소의 계산된 높이와 너비를 픽셀 단위로 반환합니다.
예
다음은 몇 가지 예의 목록입니다. 이를 통해 offsetHeight 속성이 어떻게 사용되고 작동하는지 살펴보겠습니다.
실시예 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit 산출
노란색으로 강조 표시된 단락과 제출 버튼이 포함된 아래 출력을 참조하세요. 이것을 클릭하세요 제출하다 버튼을 클릭하고 이 단락의 offsetHeight를 계산합니다.
제출 버튼을 클릭하기 전에 출력
알파 베타 가지치기 예
제출버튼 클릭 후 출력
계산된 offsetHeight는 노란색으로 강조 표시된 영역 안에 표시됩니다.
실시예 2
이 예에서는 CSS 스타일과 함께 이 예에서 제공된 단락의 offsetHeight를 계산합니다. offsetHeight에는 여백이 포함되지 않습니다.
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight 산출
분홍색으로 강조 표시된 단락과 제출 버튼이 포함된 아래 출력을 참조하세요. 이것을 클릭하세요 오프셋 높이 계산 버튼을 클릭하고 이 단락의 offsetHeight를 계산합니다.
오프셋 높이 계산 버튼을 클릭하기 전 출력
오프셋 높이 계산 버튼을 클릭한 후 출력
계산된 offsetHeight는 분홍색으로 강조 표시된 영역 안에 표시됩니다. 아래 스크린샷에서 주어진 단락의 offsetHeight가 230px임을 확인할 수 있습니다.
Java에서 int를 문자열로 변환
CSS 스타일이 없는 예 3
offsetHeight를 계산하는 또 다른 예를 참조하세요. 높이, 너비, 여백, 패딩 등과 같은 CSS 스타일은 포함되지 않았습니다. 배경색은 예상됩니다. 따라서 단락은 스타일이 없는 단순한 단락이 됩니다.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight 산출
주황색으로 강조 표시된 단락과 offsetHeight를 계산하기 위한 제출 버튼이 포함된 아래 출력을 참조하세요. 이것을 클릭하세요 오프셋 높이 계산 버튼을 클릭하고 이 단락의 offsetHeight를 계산합니다.
오프셋 높이 계산 버튼을 클릭하기 전
오프셋 높이 계산 버튼을 클릭한 후
아래 스크린샷에서 주어진 단락의 offsetHeight가 88px임을 확인할 수 있습니다.
offsetHeight와 offsetWidth를 모두 계산합니다.
이 예에서는 두 가지를 모두 계산합니다. 오프셋 높이 그리고 오프셋 너비 div 탭 내부의 단락에 대해. 따라서 그들이 얼마나 다르게 계산했는지 이해할 수 있습니다. 여기서는 CSS를 사용하고 이 예제에서는 스타일 지정을 위해 높이, 너비, 여백, 패딩 등을 전달합니다.
더 잘 이해하려면 시스템에서 아래 코드를 복사하고 실행하십시오.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit 산출
연한 파란색으로 강조 표시된 색상 영역의 단락과 제출 버튼이 포함된 아래 출력을 참조하세요. 이것을 클릭하세요 제출하다 버튼을 클릭하고 이 단락의 offsetHeight 및 offsetWidth를 계산합니다.
제출 버튼을 클릭하기 전에 출력
다음을 클릭한 후 제출하다 버튼을 클릭하면 계산된 offsetHeight는 210px이고 offsetWidth는 430px이며 연한 파란색으로 강조 표시된 영역 내에 표시됩니다. 아래 출력을 참조하세요.
제출버튼 클릭 후 출력
서로 다른 계산 매개변수를 갖는 여러 예를 살펴보았습니다. 이러한 다양한 예에서는 CSS 스타일이 있거나 없는 텍스트 단락을 전달한 다음 offsetHeight 및 offsetWidth를 별도로 계산했습니다.