Why Do jQuery\'s `height()` and `width()` Functions Return Values for Elements with `display: none`?

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

You may have assumed that elements with a CSS style of "display:none" would return 0 for height() and width() in jQuery. However, as demonstrated in the example provided, this is not always the case.

Why does this happen? To understand this behavior, we need to delve into how jQuery handles hidden elements.

If an element has an offsetWidth of 0 (which jQuery interprets as "hidden"), it attempts to determine its height. It does this by temporarily altering the element's styling:

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

Once the height is obtained via getWidthOrHeight(...) and adjusted for borders and padding if necessary, the previous styling is restored.

In essence, jQuery takes the hidden element, temporarily displays it outside of the document flow, retrieves its height, and then hides it again, all without affecting the visual appearance of the page. This allows height() and width() to provide accurate measurements even for hidden elements, provided their parents are visible.

This mechanism is built into jQuery's height() and width() methods, eliminating the need for you to manually manipulate the element's visibility.

The above is the detailed content of Why Do jQuery\'s `height()` and `width()` Functions Return Values for Elements with `display: none`?. For more information, please follow other related articles on the PHP Chinese website!