HTML如何检索元素的位置(X,Y)?
getBoundingClientRect用于获取某个元素相对于视窗的位置,以像素为单位。
1、语法:
rectObject=object.getBoundingClientRect();
注:这个方法没有参数。
2、返回值:
3、示例
下面通过示例来看看如何使用element.getBoundingClientRect()属性来检索元素的位置(X,Y)。
示例1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素位置</title> <!-- 显示位置的JavaScript代码 --> <script type="text/javascript"> function getPositionXY(element) { var rect = element.getBoundingClientRect(); document.getElementById('gfg').innerHTML = 'X: ' + rect.x + ', ' + 'Y: ' + rect.y } </script> </head> <body> <!-- 点击按钮得到它的坐标 --> <button id='button1' onclick="getPositionXY(this)"> Button 1 </button> <button id='button1' onclick="getPositionXY(this)"> Button 2 </button> <br><br> <button id='button1' onclick="getPositionXY(this)"> Button 3 </button> <p id='gfg'></p> </body> </html>
效果图:
示例2:将指针移到文档上以获取元素的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素位置</title> <!-- 选择获取位置 --> <script type = "text/javascript"> function getPositionXY(element) { var rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y; } </script> </head> <body> <p>将鼠标移到以下文本上</p> <div onmouseover = "getPositionXY(this)"> 定位: <p id = 'text'></p> </div> </body> </html>
效果图:
以上就是HTML如何检索元素的位置(X,Y)?的详细内容,更多请关注易知道|edz.cc其它相关文章!
相关内容
-
WPS里面PDF如何删除一页|word文档怎么去除多余
WPS里面PDF如何删除一页|word文档怎么去除多余的一页,WPS教程...
-
电脑里没有word文档怎么办|为什么我的电脑没有w
电脑里没有word文档怎么办|为什么我的电脑没有word文档,,1. 为...
-
对照审阅两个wps文档|快速比较两份WPS文档
对照审阅两个wps文档|快速比较两份WPS文档,审阅,对照,两个,文...
-
反向选择word快捷键|word文档转向快捷键
反向选择word快捷键|word文档转向快捷键,,1. word文档转向快捷...
-
的故障_计算机解决无法打印文档
的故障_计算机解决无法打印文档,,核心提示:最近,打印机出现了一...
-
检查元素快捷键|浏览器审查元素快捷键
检查元素快捷键|浏览器审查元素快捷键,,浏览器审查元素快捷键...
-
电脑内存的插槽在哪|电脑内存的插槽在哪个位置
电脑内存的插槽在哪|电脑内存的插槽在哪个位置,,1. 电脑内存的...
-
扬声器属性级别设置|扬声器属性高级
扬声器属性级别设置|扬声器属性高级,,1. 扬声器属性高级选择“...
-
wps文档拆分各种元格|WPS拆分单元格
wps文档拆分各种元格|WPS拆分单元格,拆分,文档,wps,1.WPS如何...
-
wps去除右键新建文档|右键新建中的wps图标去掉
wps去除右键新建文档|右键新建中的wps图标去掉,右键,去除,新...
-
wps文档内容杂乱规范|在wps文档固定文字和图片
wps文档内容杂乱规范|在wps文档固定文字和图片防止排版混乱,...
-
文档排版怎么设置|文档文字排版怎么设置
文档排版怎么设置|文档文字排版怎么设置,,1. 文档文字排版怎么...
-
cad查看属性的快捷键|cad查看特性快捷键
cad查看属性的快捷键|cad查看特性快捷键,,1. cad查看特性快捷...
-
wps单独打开标签|wps单独打开多个文档,不喜欢在
wps单独打开标签|wps单独打开多个文档,不喜欢在一个窗口显示...
-
Win10系统下实现快速打印PDF文档的方法|win10系
Win10系统下实现快速打印PDF文档的方法|win10系统pdf文件闪...