如何在 JavaScript 中找到 HTML 元素的位置？

给定一个 HTML 文档，任务是使用 JavaScript 获取任何元素的位置。使用以下步骤获取位置：
第一步：选择一个元素：在找位置之前，需要选择需要的HTML元素。 HTML 中的每个元素都以树状格式构建，称为 DOM 或文档对象模型。在 JavaScript 中，有一个称为文档对象的内置对象，它指向 DOM 树的根。这意味着可以访问网页的每个组件。
文档对象有多种方法可用于在 HTML 页面中查找特定元素。这些方法中的每一个都有一个可用于查找所需元素的参数。其中一些方法是：

• getElementsByTagName()方法
• getElementsByClassName()方法
• getElementById()方法
• getElementsByName()方法
• querySelector()方法
• querySelectorAll()方法

第 2 步：查找元素的位置：要获取 (x, y) 坐标格式中任何 HTML 元素的位置，需要使用两个文档属性：

• offsetTop 属性：它返回相对于父元素顶部的顶部位置（以像素为单位）。它包括元素的顶部位置和边距以及其父元素的顶部填充、滚动条和边框。
  例子：

html

 

    
 
         
Click the button
 
         
        
            Click
        
         
        
 
    
 
    
        function getPoint() {
            var target = document
                .getElementById("target");
 
            var output = document
                .getElementById("output");
 
            output.innerHTML = "offsetTop: "
                    + target.offsetTop;
        }
    

 

• 输出：

offsetTop: 8

• offsetLeft 属性：它返回相对于父元素左侧的左侧位置（以像素为单位）。它包括元素的左侧位置和边距以及其父元素的左侧填充、滚动条和边框。
  例子：

html

 

    
         
Click the button 
 
 
        
            Click
        
         
        
 
    
 
    
        function getPoint() {
            var target = document
                .getElementById("target");
 
            var output = document
                .getElementById("output");
 
            output.innerHTML = "offsetLeft: "
                    + target.offsetLeft;
        }
    

 

• 输出：

offsetLeft: 8

将这两个属性合二为一以获得计算 HTML 元素坐标的代码如下：

html

 

    
         
         

            Click the button to get the
            co-ordinate of the element
        
 
 
        
            Get coordinate
        
         
        
 
    
 
    
        function getPoint() {
            var target = document
                .getElementById("target");
 
            var output = document
                .getElementById("output");
 
            output.innerHTML =
                "Co-ordinate of the element:" +
                " (" + target.offsetLeft + ", "
                + target.offsetTop + ")";
        }
    

 

输出：