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

jQuery: height()/width() 대 "display:none"

CSS 스타일이 있는 요소라고 가정했을 수도 있습니다. "display:none"을 사용하면 jQuery에서 height() 및 width()에 대해 0이 반환됩니다. 그러나 제공된 예에서 알 수 있듯이 항상 그런 것은 아닙니다.

왜 이런 일이 발생합니까? 이 동작을 이해하려면 jQuery가 숨겨진 요소를 처리하는 방법을 자세히 조사해야 합니다.

요소의 offsetWidth가 0(jQuery에서는 "숨겨짐"으로 해석됨)인 경우 높이를 확인하려고 시도합니다. 요소의 스타일을 일시적으로 변경하여 이를 수행합니다:

• position: "absolute"
• visibility: "hidden"
• display: "block"

getWidthOrHeight(...)를 통해 높이를 얻고 필요한 경우 테두리와 패딩을 조정하면 이전 스타일이 복원됩니다.

본질적으로 jQuery는 숨겨진 요소를 가져와 임시로 표시합니다. 문서 흐름 외부에서 페이지의 시각적 모양에 영향을 주지 않고 높이를 검색한 다음 다시 숨깁니다. 이를 통해 height() 및 width()는 상위 요소가 표시되는 경우 숨겨진 요소에 대해서도 정확한 측정값을 제공할 수 있습니다.

이 메커니즘은 jQuery의 height() 및 width() 메서드에 내장되어 있으므로 별도의 작업이 필요하지 않습니다. 요소의 가시성을 수동으로 조작합니다.

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