使用 HTML 检索元素的位置 (X,Y)

(X, Y) 的位置是指一个元素在文档左上角的坐标。 X 代表水平位置，Y 代表垂直位置。使用 element.getBoundingClientRect() 属性获取元素的位置。

示例 1：

    
        
            position of an element
        
          
        
        
          
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('gfg').innerHTML = 
                'X: ' + rect.x + ', ' + 'Y: ' + rect.y
            }
        
    
      
    
          
        
        
            Button 1
        
          
        
            Button 2
        
          
        
        
            Button 3
        
          
        
      
    
                    

输出：

示例 2：在此示例中，将指针移到文档上以获取元素的位置。

    
        
            position of an element
        
          
        
        
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('text').innerHTML 
                = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
            }
        
    
      
    
        Move the mouse over the text
          
        
            Position:
            
        
      
    
                    

输出：