Home > Web Front-end > CSS Tutorial > Why Do jQuery\'s `height()` and `width()` Functions Return Values for Elements with `display: none`?

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

Mary-Kate Olsen
Release: 2024-10-29 07:57:30
Original
904 people have browsed it

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template