Posted about 10 years ago. Visible to the public.

Check whether an element is visible or hidden with Javascript


You can say:




jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation Archive :

element.offsetWidth > 0 && element.offsetHeight > 0;

jQuery > 3

Query 3 slightly modifies the meaning of :visible (and therefore of :hidden).

Emulate jQuery's implementation:

!(window.getComputedStyle(element).display === "none")


Don't use Element#visible(), it just checks if a CSS attribute display: none exists. This is too naive for most cases.

Emulate jQuery's implementation Archive instead:

element.offsetWidth > 0 && element.offsetHeight > 0;

Or maybe you'd even like to patch Prototype so it behaves like jQuery:

Element.addMethods({ visible: function() { return offsetWidth > 0 && offsetHeight > 0; } });

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Henning Koch
Last edit:
about 1 year ago
by Julian
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more