jsgetBoundingClientRect()来获取页面元素的位置.docx

版权申诉

128 浏览量 2022-01-19 08:01:51 上传评论收藏 16KB DOCX 举报

js getBoundingClientRect() 来获取页面元素的位置 js 中的 getBoundingClientRect() 方法用于获取页面元素的位置信息，该方法可以获取元素相对于客户端窗口的 left、top、right 和 bottom 坐标值。 js getBoundingClientRect() 方法的语法为：element.getBoundingClientRect()，返回一个 TextRectangle 对象，该对象有四个整数属性（top、left、right 和 bottom），这些属性表示元素在客户端窗口中的坐标值，以像素为单位。该方法的优点是可以快速获取元素的位置信息，不需要使用循环来计算元素的位置，从而提高了效率。在以前的 Opera 和 Firefox 版本中，需要使用循环来获取元素的位置，而现在已经支持 getBoundingClientRect() 方法，提高了开发效率。下面是一个使用 getBoundingClientRect() 方法获取元素位置的示例代码： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo</title> </head> <body style="width:2000px; height:1000px;"> <div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo</div> <script> document.getElementById('demo').onclick = function () { if (document.documentElement.getBoundingClientRect) { alert("left:" + this.getBoundingClientRect().left); alert("top:" + this.getBoundingClientRect().top); alert("right:" + this.getBoundingClientRect().right); alert("bottom:" + this.getBoundingClientRect().bottom); var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft; var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop; alert("Demo 的位置是 X:" + X + ";Y:" + Y); } } </script> </body> </html> ``` 在上面的代码中，我们使用 getBoundingClientRect() 方法获取元素的 left、top、right 和 bottom 坐标值，并将其 alert出来。同时，我们也计算了元素相对于客户端窗口的实际坐标值。 js 中的 getBoundingClientRect() 方法可以快速获取页面元素的位置信息，从而提高开发效率和页面性能。

资源推荐

资源详情

资源评论