jQuery에서 높이 가져오기

이 게시물에서는 지정된 요소의 높이를 가져오는 jQuery 메서드에 대해 설명합니다.

jQuery에서 높이 가져오기

jQuery는 jQuery 요소의 높이를 가져오는 세 가지 방법인 .height(), .innerHeight() 또는 .outerHeight()를 제공합니다. 요구 사항에 따라 이러한 방법 중 하나를 선택하여 jQuery 요소의 높이를 가져올 수 있습니다.

jQuery는 이러한 방법을 사용하여 일치하는 항목 그룹의 첫 번째 항목에 대해 현재 계산된 높이를 가져오는 데 도움이 됩니다. 먼저 이러한 방법의 차이점을 이해합시다.

1. .height() - 테두리, 패딩 및 여백을 제외한 요소의 높이를 반환하는 내장 jQuery 메서드입니다. 이 메서드는 입력 인수를 허용하지 않습니다.
2. .innerHeight() - 여백과 테두리를 제외하고 패딩을 포함하여 요소의 높이를 반환하는 내장 jQuery 메서드입니다. 이 메서드는 입력 인수를 허용하지 않습니다.
3. .outerHeight() - 테두리를 포함하지만 여백을 제외한 div 요소의 높이를 반환하는 내장 jQuery 메서드입니다. 이 메서드는 여백을 포함할지 여부를 나타내는 부울 값을 입력 인수로 허용합니다.
4. .outerHeight(true) - 여백을 포함하여 div의 높이를 반환하는 내장 jQuery 메서드입니다.

통사론:

.height().innerHeight().outerHeight(val boolean)

.height()와 .css("height")의 유일한 차이점은 전자는 단위가 없는 픽셀 값(예: 250)을 반환하고 후자는 단위가 그대로 있는 값(예: 250px)을 반환한다는 것입니다. ). .height() 메서드는 수학적 계산에서 요소의 높이를 사용할 때 권장됩니다.

.height()는 CSS 상자 크기 속성 값에 관계없이 항상 콘텐츠의 높이를 반환합니다. 이렇게 하려면 CSS 속성 높이에 box-sizing을 더한 다음 요소가 box-sizing: border-box인 경우 각 요소에 대한 모든 잠재적인 테두리와 패딩을 빼야 할 수 있습니다.

이를 방지하려면 .height() 대신 .css( "height")를 사용하십시오.

아래의 간단한 예를 통해 이해해 봅시다.

<button id="para">Get Height</button>
<p>
  Hello Users
</p>

p {
  border: 1px black solid;
  margin: 3px;
  padding: 5px;
}

$('#para').on('click', () => {
  console.log('height', $('p').height());
  console.log('Inner height', $('p').innerHeight());
  console.log('Outer height', $('p').outerHeight());
});

위의 예에서 1px 테두리, 3px 여백 및 5px 패딩으로 단락 태그를 정의했습니다. 사용자가 버튼을 클릭하여 단락 태그의 높이를 가져오면 테두리, 패딩 및 여백을 제외한 p 태그의 .height()를 가져옵니다.

.innerHeight() 메서드는 패딩이 있는 단락 태그의 높이를 가져오고 .outerHeight() 메서드는 테두리와 여백이 있는 단락 태그의 높이를 가져옵니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하면 아래 결과가 표시됩니다.

"height", 18.4
"Inner height", 28.4
"Outer height", 30.4

데모