How to check if an element is visible in DOM ?

Method 1: Checking the height, width and bounding rectangle of the element: The element can be checked whether it is visible by checking the height, width, and dimensions of the bounding rectangle of the element.
The offsetHeight property is used to get the height of an element including the vertical padding and borders if present. It will return an integer with the height in pixels.
Similarly, the offsetWidth property is used to get the width of an element including the horizontal padding and borders if present. It will return an integer with the width in pixels.

The getClientRects() is used to get the collection of bounding rectangle of the element. It returns a list of DOMRect object. The length property of this list can be used to verify whether the list has any rectangle object. If the length returned is 0, it means that no rectangle objects were found.

The combination of all these three results are taken together to test whether the element is visible. If it returns true value then the object is visible and the false value signifies that the object is invisible.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
    offset-rects-before
  • After clicking the button:
    offset-rects-after

Method 2: Using getComputedStyle() mETHOD: The getComputedStyle() method is used to return an object that contains all the CSS properties of the element. Each of these properties can now be checked for any property required.
The display property is used to specify the display behavior of an element. The ‘none’ value of this property completely hides the element from the page. This property is checked with the ‘none’ value in the style object returned. A true return value means that the object is invisible and The false value signifies that the object is visible.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check if 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) {
            let style = window.getComputedStyle(element);
              
            if (style.display == 'none') 
                return false;
            else
                return true;
        }
      
        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>

chevron_right


Output:

  • Before clicking the button:
    getComputedStyle-before
  • After clicking the button:
    getComputedStyle-after


My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.