前端js实现获取指定元素（top,lef,right,bottom）到视窗的距离；getBoundingClientRect()获取

最新推荐文章于 2023-09-16 23:50:14 发布

原创最新推荐文章于 2023-09-16 23:50:14 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #dom到浏览器视窗距离

本文介绍了JavaScript中的getBoundingClientRect()方法，用于获取HTML元素相对于视窗的位置信息，包括top,left,right,bottom,width和height属性。通过getElementById选取元素并计算其在页面布局中的坐标关系。

getBoundingClientRect()获取元素位置，这个方法没有参数

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

	<div id="box"></div>

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