Open In App

How to check if an element is visible in DOM ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:




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

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




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


Output:

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


Last Updated : 24 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads