>  기사  >  웹 프론트엔드  >  jQuery를 사용하여 숨겨진 요소의 높이를 얻는 방법은 무엇입니까?

jQuery를 사용하여 숨겨진 요소의 높이를 얻는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-02 19:47:021052검색

How to Get the Height of a Hidden Element with jQuery?

jQuery로 숨겨진 요소의 높이 검색

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

비효율적인 접근 방식

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

대체 솔루션

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

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

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

코드 예

<code class="javascript">var previousCss = $("#myDiv").attr("style");

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

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

$("#myDiv").attr("style", previousCss ? previousCss : "");</code>

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

위 내용은 jQuery를 사용하여 숨겨진 요소의 높이를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.