如何使用 JavaScript 按类隐藏 HTML 元素？

假设您给出了一个 HTML 文档，任务是在 JavaScript 的帮助下按类名隐藏 HTML 元素。有两种方法可以用适当的例子来解释。

方法一：在这种方法中， getElementsByClassName() 选择器用于选择特定类的元素。索引用于获取相应索引处的元素。要访问CSS 可见性属性，我们可以在元素上使用 DOM style.visibility将其设置为隐藏值。

• 例子：

    
  
      
          How to hide an HTML element
          by class in JavaScript
      
      
      
      
          body {
              text-align: center;
          }
            
          h1 {
              color: green;
          }
            
          .geeks {
              color: green;
              font-size: 24px;
              font-weight: bold;
          }
      
  
    
  
       
          GeeksforGeeks 
      
       
          Click on button to hide the element 
          by class name
      
      
      
          Child 1
          Child 1
          Child 2
          Child 2
      
      
      
          click here
      
      
      
      
          var down = document.getElementById('GFG_DOWN');
    
          function GFG_Fun() {
              document.getElementsByClassName('child1')[0].
              style.visibility = 'hidden';
              down.innerHTML = "Element is hidden";
          }
      
  
    

• 输出：

方法2：在这种方法中， querySelectorAll() 选择器用于选择特定类的元素。索引用于获取相应索引处的元素。要访问CSS 可见性属性，我们可以在元素上使用 DOM style.visibility将其设置为隐藏值。

• 例子：

    
  
      
          How to hide an HTML element
          by class in JavaScript
      
      
      
      
          body {
              text-align: center;
          }
            
          h1 {
              color: green;
          }
            
          .geeks {
              color: green;
              font-size: 24px;
              font-weight: bold;
          }
      
  
    
  
       
          GeeksforGeeks 
      
       
          Click on button to hide the element 
          by class name
      
      
      
          Child 1
          Child 1
          Child 2
          Child 2
      
      
      
          click here
      
      
    
      
          var down = document.getElementById('GFG_DOWN');
    
          function GFG_Fun() {
              document.querySelectorAll('.child1')[0].
              style.visibility = 'hidden';
              down.innerHTML = "Element is hidden";
          }
      
  
    

• 输出：