Posted about 10 years ago. Visible to the public.

Check whether an element is visible or hidden with Javascript

jQuery

You can say:

Copy
$(element).is(':visible')

and

Copy
$(element).is(':hidden')

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 :

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

jQuery > 3

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

Emulate jQuery's implementation:

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

Prototype

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:

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

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

Copy
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:

Avatar
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