CSS 높이 규칙이 정의되지 않은 경우에도 jQuery에서 div 요소의 높이를 어떻게 검색할 수 있나요?

CSS 높이 규칙 없이 Div 높이를 검색하는 방법

요소의 높이를 결정해야 할 때 답답할 수 있지만, 정의된 CSS 높이 규칙이 없습니다. 하지만 걱정하지 마세요! jQuery가 해결책을 제시합니다.

jQuery의 Height() 메서드 활용

가정과 달리 jQuery의 .height() 메서드에는 미리 정의된 CSS 높이가 필요하지 않습니다. 규칙. 계산된 스타일을 고려하여 요소의 렌더링된 높이를 계산합니다. 이는 높이가 명시적으로 설정되지 않은 시나리오에서도 효과적인 방법입니다.

높이 계산 옵션 이해

jQuery는 특정 요구 사항을 충족하는 여러 가지 높이 계산 방법을 제공합니다.

• .height(): 패딩, 테두리, 여백을 제외한 요소의 높이를 반환합니다.
• .innerHeight(): 패딩은 포함하고 테두리와 여백은 제외한 높이를 반환합니다.
• .outerHeight(): 테두리는 포함하지만 여백은 제외한 높이를 반환합니다.
• .outerHeight(true): 여백과 모든 장식을 포함한 높이를 반환합니다.

실시간 데모

다음은 다양한 높이 계산 방법을 보여주는 코드 조각입니다.

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest
    .html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

이 코드는 높이가 180px이고 패딩이 10px인 div를 생성합니다. , 여백 10px, 파란색 테두리. 그런 다음 각 방법을 사용하여 계산된 높이를 표시합니다. 브라우저 콘솔에서 렌더링된 결과를 확인할 수 있습니다.

위 내용은 CSS 높이 규칙이 정의되지 않은 경우에도 jQuery에서 div 요소의 높이를 어떻게 검색할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!