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

"display:none"을 사용하는 jQuery의 특이한 Height() 및 Width() 동작

jQuery의 height() 및 width() 메서드는 다음과 같습니다. 웹페이지에 표시되는 요소의 크기를 결정하는 데 널리 사용됩니다. 그런데 CSS 속성 "display:none"이 설정된 요소를 처리할 때 예상치 못한 동작이 있는 것 같습니다.

질문

전통적으로는 믿어져 왔습니다. "display:none"이 있는 요소의 높이와 너비는 0입니다. 그러나 jQuery의 경우 항상 그런 것은 아닙니다. 다음 예를 고려하십시오.

<code class="html"><div id="target" style="display:none;">
  a
</div></code>

<code class="css">alert($("#target").height());</code>

이 예에서 "대상" 요소의 높이는 0이 아니라 0이 아닌 값입니다. 이러한 불일치는 질문을 제기합니다. 왜 "display:none"이 있는 요소는 때때로 jQuery에서 0이 아닌 높이와 너비를 반환합니까?

대답

이 동작을 이해하려면 , jQuery의 height() 및 width() 메소드의 내부 작동을 조사해야 합니다. 요소의 눈에 보이는 offsetWidth가 0인 경우("숨겨짐"을 나타냄) jQuery는 실제 크기를 계산하려고 시도합니다. 요소의 CSS 속성:

• position: "absolute"
• visibility: "hidden"
• display: "block"
을 일시적으로 재정의하여 이를 수행합니다.

이러한 수정을 통해 jQuery는 필요에 따라 테두리와 패딩을 고려하여 요소의 높이를 검색합니다. 높이가 결정되면 jQuery는 원래 CSS 속성을 복원하여 눈에 보이는 변화가 발생하지 않도록 합니다.

이 프로세스를 통해 상위 요소가 표시되는 한 숨겨진 요소에 대해 height() 및 width()가 올바르게 작동할 수 있습니다. 기본적으로 jQuery는 단일 작업으로 문서 흐름 외부에 요소를 표시하고 해당 크기를 검색한 다음 다시 숨기는 동작을 모두 뒤에서 시뮬레이션합니다. 이렇게 하면 개발자가 치수를 얻기 위해 요소를 수동으로 표시하거나 숨길 필요가 없습니다.

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