How to Check if an Element is Visible in DOM?

Last Updated : 11 Oct, 2024

To check if an element is visible in the DOM, the process involves determining its presence and whether it is displayed on the page.

Below are the approaches to check if an element is visible in DOM or not:

Table of Content

Using offsetHeight and offsetWidth
Using getComputedStyle() method

Approach 1: Using offsetHeight and offsetWidth

The offsetHeight property retrieves the height of an element, including vertical padding and borders, and returns an integer in pixels.
The offsetWidth property obtains the width of an element, including horizontal padding and borders, and returns an integer in pixels.
The getClientRects() method provides a collection of bounding rectangles for the element, returning a list of DOMRect objects, with a length of 0 indicating no rectangles found.
Visibility is assessed by combining the results from these properties; a true value indicates the element is visible, while a false value signifies it is invisible.

Example: This example shows the implementation of the above-mentioned approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to check if an element
        is visible in DOM?
    </title>
    
    <style>
        .visible {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    
        .invisible {
            height: 100px;
            width: 100px;
            background-color: green;
            display: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>
        How to check if element
        is visible in DOM?
    </b>
    
    <p>
        Below is a visible object
    </p>
    
    <div class="visible"></div>
    
    <p>
        Below is a invisible
        object
    </p>
    
    <div class="invisible"></div>
    
    <p>
        Click on the button to check for the
        visibility of the objects.
    </p>
    
    <p>Output for visible object: 
        <span class="outputVisible"></span>
    </p>
    
    <p>
        Output for non visible object: 
        <span class="outputInvisible"></span>
    </p>

    <button onclick="checkVisibility()">
        Click here
    </button>
    
    <script type="text/javascript">
        function isElementVisible(element) {
            if (element.offsetWidth || 
               element.offsetHeight || 
               element.getClientRects().length)
                return true;
            else
                return false;
        }
    
        function checkVisibility() {
            visibleObject = 
            document.querySelector(".visible");
            
            invisibleObject = 
            document.querySelector(".invisible");
    
            document.querySelector(".outputVisible").textContent
                    = isElementVisible(visibleObject);
                    
            document.querySelector(".outputInvisible").textContent
                        = isElementVisible(invisibleObject);
        }
    </script>
</body>

</html>

Output:

Approach 2: Using getComputedStyle() method

The getComputedStyle() method returns an object containing all the CSS properties of an element.
Each property can be checked for specific values as needed.
The display property specifies how an element is displayed.
A value of 'none' for the display property completely hides the element from the page.
Checking the display property against 'none' indicates visibility; a true return value means the element is invisible, while a false value signifies it is visible.

Example: This example shows the implementation of the above-mentioned appraoch.