如何检查一个元素在 DOM 中是否可见？

方法一：检查元素的高、宽、外接矩形：可以通过检查元素外接矩形的高、宽、尺寸来判断元素是否可见。
offsetHeight属性用于获取元素的高度，包括垂直填充和边框（如果存在）。它将返回一个整数，其高度以像素为单位。
类似地， offsetWidth属性用于获取元素的宽度，包括水平填充和边框（如果存在）。它将返回一个整数，其宽度以像素为单位。

getClientRects()用于获取元素的边界矩形的集合。它返回一个 DOMRect 对象的列表。这个列表的长度属性可以用来验证列表是否有任何矩形对象。如果返回的长度为 0，则表示没有找到矩形对象。

将所有这三个结果组合在一起来测试元素是否可见。如果它返回真值，那么对象是可见的，而假值表示对象是不可见的。

例子：

  

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

  

    
        GeeksforGeeks
    
      
    
        How to check if element
        is visible in DOM?
    
      
    
        Below is a visible object
    
      
    
      
    
        Below is a invisible
        object
    
      
    
      
    
        Click on the button to check for the
        visibility of the objects.
    
      
    Output for visible object: 
        
    
      
    
        Output for non visible object: 
        
    
  
    
        Click here
    
      
    
        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);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法2：使用getComputedStyle() 方法： getComputedStyle()方法用于返回一个包含元素所有CSS 属性的对象。现在可以检查这些属性中的每一个是否有任何所需的属性。
display 属性用于指定元素的显示行为。此属性的“无”值完全隐藏页面中的元素。使用返回的样式对象中的“无”值检查此属性。 true 返回值表示对象不可见，false 值表示对象可见。

例子：

  

    
        How to check if element
        is visible in DOM?
    
      
    
        .visible {
            height: 100px;
            width: 100px;
            background-color: green;
        }
      
        .invisible {
            height: 100px;
            width: 100px;
            background-color: green;
            display: none;
        }
    

  

    
        GeeksforGeeks
    
      
    
        How to check if element
        is visible in DOM?
    
      
    Below is a visible object
    
      
    Below is a invisible object
    
      
    
        Click on the button to check for the
        visibility of the objects.
    
      
    
        Output for visible object: 
        
    
      
    
        Output for non visible object: 
        
    
  
    
        Click here
    
      
    
        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);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：