How jQuery .show() Calculates the Display Property

When you call the .show() method in jQuery, the library restores a hidden element's visibility by determining its intended CSS display value. Instead of simply applying display: block to every element, jQuery follows a multi-step resolution process: it clears inline hiding styles, checks internally cached display values, inspects computed styles, and, if necessary, creates a temporary clean element to determine the browser's default display property for that specific HTML tag.

1. Clearing Inline Hiding Styles

The first action jQuery takes is attempting to clear any inline display: none declaration from the element's style attribute. In many cases, an element was hidden using jQuery's .hide() method, which sets element.style.display = "none".

By executing elem.style.display = "", jQuery strips the inline override, allowing any existing stylesheet rules or user-agent defaults to take effect immediately.

2. Checking the Internal Cache

If removing the inline style does not make the element visible—or if jQuery is handling an element it previously tracked—it looks into its internal data storage (jQuery._data or internal cache).

When .hide() runs on an element that already has a non-hidden inline display value (for example, display: inline-flex), jQuery stores that specific value in its internal cache before applying none. When .show() is called, jQuery retrieves this cached value and applies it back to the element's inline style.

3. Evaluating Computed Styles

After clearing inline styles and checking the cache, jQuery checks the element's computed display property via window.getComputedStyle(elem).display.

If the computed style is not "none" (meaning the element is now visible due to an external CSS rule or native tag behavior), jQuery leaves the inline style empty. This ensures that responsive CSS media queries or stylesheet rules continue to dictate the layout without inline interference.

4. Resolving External CSS Rules and Generating Tag Defaults

If the computed style remains "none", it usually means an external CSS rule (such as a class setting display: none;) is still hiding the element. To override the stylesheet, jQuery must assign a concrete inline display property, such as block, inline, or table-cell.

To find the correct value, jQuery uses an internal utility function that executes the following steps:

  1. Tag-Level Lookup: jQuery maintains an internal hash map of default display values mapped by tag name (e.g., DIV: "block", SPAN: "inline", LI: "list-item"). If the tag's default is already known, it uses that value.
  2. Fresh Node Creation: If the tag name is not yet cached, jQuery creates a pristine instance of that element in the DOM (e.g., document.createElement(nodeName)). This element is appended directly to the <body> (or inside an isolated <iframe> in older jQuery versions to prevent parent CSS interference).
  3. Measuring Default Style: jQuery reads the computed display value of this unstyled, isolated element.
  4. Caching the Result: The calculated display string is saved to jQuery's global tag-name cache to prevent repeated DOM operations for identical tags later.
  5. DOM Cleanup: The temporary element is immediately removed from the document.

5. Applying the Calculated Value

Once jQuery determines the correct value—either from its cache or by measuring an isolated node—it assigns that value directly to the element:

elem.style.display = calculatedValue;

This inline declaration overrides the external stylesheet rule that was suppressing the element, successfully making it visible while preserving the layout semantics native to that HTML element.