elementUi getBoundingClientRect() 方法

最新推荐文章于 2024-10-16 08:45:00 发布

starry__sty

最新推荐文章于 2024-10-16 08:45:00 发布

阅读量590

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/starry__sty/article/details/117133794

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了getBoundingClientRect()方法，用于获取页面元素的位置及其与视口的关系，包括返回值类型、用途、兼容性和实例。了解如何获取元素大小及相对位置，是前端开发者必备技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getBoundingClientRect()

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
getBoundingClientRect()获取元素位置，这个方法没有参数;
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档遮住的部分）。

语法:

var domRect = element.getBoundingClientRect（）;

返回值类型：

domRect .top：元素上边到视窗上边的距离;
domRect .right：元素右边到视窗左边的距离;
domRect .bottom：元素下边到视窗上边的距离;
domRect .left：元素左边到视窗左边的距离;

例子:

	<div id="box"></div>
var object=document.getElementById('box');  
rectObject = object.getBoundingClientRect();
 
	rectObject.top：元素上边到视窗上边的距离;
	rectObject.right：元素右边到视窗左边的距离;
	rectObject.bottom：元素下边到视窗上边的距离;
	rectObject.left：元素左边到视窗左边的距离;
	rectObject.width：是元素自身的宽
	rectObject.height是元素自身的高