Why Does `jQuery.height()` Return a Value for a Hidden Element?

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

In this scenario, the element with the ID "target" has its display property set to "none" via CSS. However, when checking its height using $("#target").height(), a non-zero value is obtained.

This behavior stems from jQuery's internal handling of hidden elements when accessing their dimensions. If an element has an offsetWidth of 0 (considered "hidden" by jQuery), the library attempts to determine its height.

To accomplish this, jQuery temporarily applies the following properties to the element:

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

It then retrieves the height usinggetWidthOrHeight(...), which adds border/padding as needed, and restores the original properties.

Essentially, jQuery discreetly displays the element خارج حدود تدفق المستند, obtains its height, and then hides it again. This occurs before the UI thread can update, so the user remains unaware of the process.

This mechanism enables .height()/.width() to function even on hidden elements, provided their parent elements are visible. Therefore, you can invoke .height()/.width() without manually performing the show/hide sequence, as it is handled internally by these methods.

The above is the detailed content of Why Does `jQuery.height()` Return a Value for a Hidden Element?. For more information, please follow other related articles on the PHP Chinese website!