jQuery의 `.height()` 및 `.width()` 메소드가 `display: none`이 있는 요소에 대한 값을 반환하는 이유는 무엇입니까?

jQuery: .height()/.width() 및 "display:none"

"display"가 있는 요소라는 대중적인 가정에도 불구하고 :none"은 jQuery의 .height() 및 .width() 메서드에 대해 0을 반환하지만 항상 그런 것은 아닙니다. 제공된 예에서 대상 요소는 숨겨져 있음에도 불구하고 0이 아닌 높이를 반환합니다.

왜 이런 일이 발생합니까?

jQuery 소스 코드에 따르면 요소의 offsetWidth가 0( jQuery가 "숨겨짐"으로 간주함을 나타냄) 높이를 결정하기 위해 일련의 단계가 수행됩니다.

1. 요소의 위치는 "절대"로 설정됩니다.
2. 가시성은 다음으로 설정됩니다. "hidden".
3. 표시가 "block"으로 설정됩니다.

이렇게 하면 요소를 문서 흐름 밖으로 효과적으로 이동하고 테두리/패딩을 고려하면서 높이를 계산한 다음 이전 설정을 되돌립니다.

따라서 jQuery는 기본적으로 UI가 실제로 업데이트되기 전에 요소를 일시적으로 표시하고 높이를 계산한 다음 다시 보이지 않게 만듭니다. 이를 통해 .height() 및 .width()는 부모 요소가 표시되는 한 숨겨진 요소에서도 작동할 수 있습니다.

.height() 및 .width() 메서드는 이 표시/숨기기 프로세스를 내부적으로 처리합니다. 따라서 개발자는 코드에서 이러한 검사를 수동으로 구현할 필요가 없습니다.

위 내용은 jQuery의 `.height()` 및 `.width()` 메소드가 `display: none`이 있는 요소에 대한 값을 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!