关键词

坐标 元素 获取

JavaScript中如何获取元素坐标(Position)

JavaScript获取元素位置

JavaScript可以用来获取元素的位置,位置包括元素的x,y坐标,以及宽度和高度。

获取元素位置的方法

JavaScript有两种方法可以获取元素的位置:

  • 1. 使用getBoundingClientRect()方法,该方法返回一个对象,包含元素的位置,宽度和高度等信息。
  • 2. 使用offsetTop和offsetLeft属性,该属性返回元素相对于其父元素的偏移量,即元素的x,y坐标。

使用getBoundingClientRect()方法

使用getBoundingClientRect()方法可以获取元素的位置,宽度和高度等信息,该方法返回一个对象,该对象有6个属性,分别是:

  • top:元素上边缘距离页面顶部的距离;
  • right:元素右边缘距离页面左边的距离;
  • bottom:元素下边缘距离页面顶部的距离;
  • left:元素左边缘距离页面左边的距离;
  • width:元素宽度;
  • height:元素高度。
// 获取元素位置
let rect = document.getElementById('element').getBoundingClientRect();
let x = rect.left;
let y = rect.top;
let width = rect.width;
let height = rect.height;

使用offsetTop和offsetLeft属性

使用offsetTop和offsetLeft属性可以获取元素相对于其父元素的偏移量,即元素的x,y坐标,该属性返回的是数值,不是对象。

// 获取元素位置
let x = document.getElementById('element').offsetLeft;
let y = document.getElementById('element').offsetTop;

本文链接:http://task.lmcjl.com/news/11763.html

展开阅读全文