如何使用 JavaScript 使除固定区域以外的整个屏幕变暗？

给定一个 HTML 文档，任务是使整个屏幕变暗，除了一个或几个元素。需要使用 JavaScript 在页面的某些部分上引起用户的注意。

方法：

• 选择焦点的元素。
• 使用box-shadow属性使该区域可见。

示例 1：此示例聚焦 HTML 文档的一个 div，其他部分变暗。

 
 
  
 
     
        Dim the entire screen except
        a fixed area in JavaScript ?
         
      
    
        .dim {
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
              
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
        }
    

  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
    
        click here
    
      
    
    
      
     
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on button to make everything"
                + " dim on the screen.";
        var down = document.getElementById('GFG_DOWN'); 
        var heading = document.getElementById('h1');
        function GFG_Fun() {
            heading.classList.add('dim');
            down.innerHTML = "Everything becomes dim "
                    + "except heading(h1)";
        }
     
 
  

输出：

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

示例 2：在此示例中，按钮已获得焦点， pointer-events属性也设置为 none，其他部分变暗。

 
 
  
 
     
        Dim the entire screen except
        a fixed area in JavaScript ?
         
      
    
        .dim {
              
            /* For Internet Explorer */
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
              
            /* For other browsers */
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
            pointer-events: none;
        } 
    

  
  
      
      
        GeeksForGeeks  
    
      
    
    
      
    
        click here
    
      
    
    
      
     
        var up = document.getElementById('GFG_UP');
          
        up.innerHTML = "Click on button to make everything"
                + " dim on the screen.";
        var down = document.getElementById('GFG_DOWN'); 
        var button = document.getElementById('button');
          
        function GFG_Fun() {
          button.classList.add('dim');
          down.innerHTML = "Everything becomes dim"
                + " except button";
        }
     
  
  

输出：

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