如何使用jQuery检查元素是否可见？

给定一个HTML文档和任务是检查该元素是可见或不使用jQuery：可见选择。 :visible 选择器可以与.toggle()函数一起使用来切换元素的可见性。它适用于元素可见性：隐藏；或不透明度：0；

句法：

$(element).is(":visible");

示例 1：此示例使用 :visible 选择器来检查元素是否可见，使用 jQuery。

  

    
        How to check an element is
        visible or not using jQuery?
    
      
    
    

  

  
     
        GeeksForGeeks 
     
      
    
        How to check an element is 
        visible or not using jQuery ?
    
      
    
        GEEKSFORGEEKS - A computer science
        portal for geeks.
    
      
    
    
      
    
        $(document).ready(function() {
            $("input").click(function() {
                  
                // Display hide paragraph on button click
                if (this.value == "Click to Display") 
                    this.value = "Click to Hide";
                else this.value = "Click to Display";
                  
                $("p").toggle("slow", function() {
                      
                    // Check paragraph once toggle
                    // effect is completed
                    if($("p").is(":visible")) {
                        alert("Paragraph is visible.");
                    } else {
                        alert("Paragraph is hidden.");
                    }
                });
            });
        });
    

  
        

输出：

示例 2：此示例使用 :visible 选择器来检查元素是否使用 jQuery 可见。

  

    
        How to check an element is
        visible or not using jQuery?
    
  
    
    
      
     
        h1 { 
            color: green; 
        } 
        table, th, td { 
            border: 1px solid black; 
            text-align: center;
        } 
    

  

    
     
        GeeksForGeeks 
     
      
    
        How to check an element is 
        visible or not using jQuery?
    
      
    
    
      
     
      
         
             
             
         
         
             
             
         
         
             
             
         
         
             
             
         
         
             
             
         
         
             
             
         
    Language IndexLanguage Name1C2C++3Java4Python5HTML 
      
    
      
    
        $(document).ready(function() {
            $("input").click(function() {
                  
                // Display hide paragraph on
                // button click
                if (this.value=="Click to Display")
                    this.value = "Click to Hide";
                else 
                    this.value = "Click to Display";
                  
                $("table").toggle("slow", function() {
                      
                    // Check paragraph once toggle
                    // effect is completed
                    if($("table").is(":visible")) {
                        $("h4").text("Paragraph is visible.");
                    } 
                    else {
                        $("h4").text("Paragraph is hidden.");
                    }
                });
            });
        });
    
    

  
        

输出：

• 点击按钮前：
  
• 点击“点击显示”按钮后：
  
• 点击“点击隐藏”按钮后：