原生JS获取页面中DIV绝对位置的方法

JavaScript09

原生JS获取页面中DIV绝对位置的方法,第1张

在 JS获取div高度的方法 中,整理了几个有关于获取div高度的方法,后来又遇到一个问题,怎么获取DIV在页面中的绝对位置,因此在这篇笔记中记录一下。

页面结构

样式

getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。

offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置,整型,单位像素。

借用这个思路,当我们想获取元素的绝对位置时,可以递归遍历,直到元素的父元素为body为止。

关于offsetParent属性,有以下几点Tips。

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写基础代码。

2、在index.html中的<script>标签,输入js代码:

var el = window.document.body

window.document.body.onmouseover = function(event) {

el = event.target

$('body').append('<br/>当前鼠标在' + $(el).html() + '元素上')

}

3、浏览器运行index.html页面,此时鼠标移动到123上,会打印出光标在123元素上。