如何用js取得鼠标所在位置的html元素属性

时间:2024-10-13 01:28:47

1、新建一个html页面,命名为test.html,用于讲解如何用js取得鼠标所在位置的html元素属性。

如何用js取得鼠标所在位置的html元素属性

2、在test.html页面,使用table表格标签创建四个表格,每人表格有一个单元格。代码如下:

如何用js取得鼠标所在位置的html元素属性

3、在table的下面,使用span创建鼠标位置显示区,并设置其id属性为show,方便下面获得该对象,把获得的元素属性显示在这里。

如何用js取得鼠标所在位置的html元素属性

4、给body标签绑定onmousemove事件,当鼠标放在页面上时,执行pos()方法,获得元素对象并显示其id属性。

如何用js取得鼠标所在位置的html元素属性

5、在js里,新建一个fnGetTable()函数,用于判断鼠标是否放在table表格的单元格上,如果是放在单元格上,则把当前的表格对象返回。

如何用js取得鼠标所在位置的html元素属性

6、在pos()函数内,使用elementFromPoint通过鼠标的x,y坐标获得元玟姑岭箫素对象,通过fnGetTable()函数判断是否是单元格元素,如果是单元格元素,则获得当前的table表格的id属性,并把id的属性值显示在span标签内。

如何用js取得鼠标所在位置的html元素属性

7、在浏览器打开test.html页面,把鼠标放在单元格上,获得鼠标所有位置的html元素的属性值,把table的id显示在span标签内。

如何用js取得鼠标所在位置的html元素属性
© 手抄报圈