jQuery를 사용하여 숨겨진 요소의 높이 검색

숨겨진 요소로 작업할 때 다양한 목적을 위해 해당 크기를 검색해야 할 수 있습니다. 그러나 요소가 표시되지 않으면 요소의 높이를 얻는 기존 방법은 실패할 수 있습니다.

비효율적인 접근 방식

요소를 일시적으로 숨김 해제하는 설명된 접근 방식은 높이를 저장한 다음 다시 숨기는 것은 번거롭고 비효율적입니다.

대안 솔루션

jQuery는 보다 효율적인 솔루션을 제공합니다:

1. 요소 속성 수정: 요소의 스타일 속성을 일시적으로 조작합니다:

   • 위치를 절대 위치로 설정(요소가 이미 절대 위치인 경우 선택 사항)
   • 공개 상태를 숨김으로 설정 (요소를 표시하지 않음)
   • 표시를 차단으로 설정(요소를 표시하지만 기본 문서 흐름에는 표시하지 않음)
2. 높이 측정: jQuery의 .height() 메소드를 사용하여 요소의 높이를 검색합니다.
3. 속성 복원: attr() 메서드를 사용하거나 스타일 속성을 직접 설정하여 요소의 스타일 속성을 원래 값으로 설정합니다.

코드 예

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

이 방법을 사용하면 페이지의 레이아웃이나 가시성에 영향을 주지 않고 숨겨진 요소의 높이를 신중하게 측정할 수 있습니다. .