How to Check DOM Element Visibility in jQuery

In jQuery, checking the visibility of a DOM element is a common task, especially when you need to make conditional decisions based on the element's state. This article will guide you through the process of using the .is(':visible') method to determine the visibility of a DOM element, and we'll also explore the use of the :visible selector for checking multiple elements.

Checking a Single Element

To check the visibility of a single DOM element in jQuery, you can use the .is(':visible') method. Here's an example:

if((':visible')) {    console.log('The element is visible.');} else {    console.log('The element is not visible.');}

Explanation

myElement: This refers to the DOM element you want to check, typically selected using an ID, class, or other selector. .is(':visible'): This checks if the selected element is visible. If the element is not hidden using CSS properties such as display: none or visibility: hidden, and it has a width and height greater than zero, the method will return true. Otherwise, it returns false.

Checking Multiple Elements

If you need to check the visibility of multiple elements, you can use the .each() method to iterate through each element and apply the visibility check:

.myElements.each(function() {    if((':visible')) {        console.log($(this).attr('id')   ' is visible.');    } else {        console.log($(this).attr('id')   ' is not visible.');    }});

Advanced Visibility Checks

While the .is(':visible') method is straightforward, the :visible selector has additional features that might come in handy. For example, this selector will also select elements with visibility: hidden or opacity: 0, even though they are not visible to the eye but still preserve white space in the layout.

Example of Multiple Elements

Here's a more detailed example of checking the visibility of multiple elements with a specific CSS selector:

const isVisible  (':visible');console.log(isVisible); // This will log a boolean value based on the element's visibility.

This variable isVisible will store a boolean value indicating whether the element is visible or not.

For a more in-depth look at how to test visibility in jQuery, you can refer to this MDN Web Docs article.