JavaScript 如何查找HTML元素的位置

在本文中，我们提供了一个HTML文档，并且的任务是使用JavaScript获取任何元素的位置。使用以下步骤获取位置：

步骤1：选择一个元素： 在查找位置之前，有必要选择所需的HTML元素。 HTML中的每个元素都以树状格式结构化，称为DOM或文档对象模型。在JavaScript中，有一个内置对象称为document对象，它指向DOM树的根部。这意味着可以访问网页的每个组件。document对象具有各种方法，可用于在HTML页面中查找特定元素。每个方法都有一个参数，可用于查找所需的元素。其中一些方法有：

getElementsByTagName()方法
getElementsByClassName()方法
getElementById()方法
getElementsByName()方法
querySelector()方法
querySelectorAll()方法
步骤2：查找元素的位置： 要以(x, y)坐标格式获取任何HTML元素的位置，有两个文档属性被使用：

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

示例： 此示例展示了上述方法的使用。

<body> 
    <div id="target"> 
        <p>Click the button</p> 
      
      
        <button onclick="getPoint()"> 
            Click 
        </button> 
      
        <p id="output"></p> 
      
    </div> 
      
    <script> 
        function getPoint() { 
            var target = document 
                .getElementById("target"); 
          
            var output = document 
                .getElementById("output"); 
          
            output.innerHTML = "offsetTop: " 
                    + target.offsetTop; 
        } 
    </script> 
</body>

输出：

JavaScript 如何查找HTML元素的位置

JavaScript offsetLeft 属性： ：返回元素相对于其父元素左侧的像素位置。它包括元素自身的左侧位置、外边距以及其父元素的左填充、滚动条和边框。

示例： 这个示例展示了 offsetLeft 属性的使用。

<body> 
    <div id="target"> 
        <p>Click the button </p> 
      
      
        <button onclick="getPoint()"> 
            Click 
        </button> 
      
        <p id="output"></p> 
      
    </div> 
      
    <script> 
        function getPoint() { 
            var target = document 
                .getElementById("target"); 
          
            var output = document 
                .getElementById("output"); 
          
            output.innerHTML = "offsetLeft: " 
                    + target.offsetLeft; 
        } 
    </script> 
</body>

输出：

JavaScript 如何查找HTML元素的位置

<body> 
    <div id="target"> 
        <p> 
            Click the button to get the 
            co-ordinate of the element 
        </p> 
      
        <button onclick="getPoint()"> 
            Get coordinate 
        </button> 
      
        <p id="output"></p> 
      
    </div> 
      
    <script> 
        function getPoint() { 
            var target = document 
                .getElementById("target"); 
          
            var output = document 
                .getElementById("output"); 
          
            output.innerHTML =  
                "Co-ordinate of the element:" + 
                " (" + target.offsetLeft + ", " 
                + target.offsetTop + ")"; 
        } 
    </script> 
</body>

输出:

JavaScript 如何查找HTML元素的位置