ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

获取某个html元素相对于视窗的位置集合

2022-07-28 10:35:22  阅读:91  来源: 互联网

标签:视窗 getBoundingClientRect 元素 距离 height html rectObject 集合


getBoundingClientRect()

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

getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 

getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。 

 

 该函数返回一个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是元素自身的高

在ie7及ie7以下的html元素坐标会从(2, 2)开始算起,在ie8已经修复了这个bug。这就是多出两个像素的原因

标签:视窗,getBoundingClientRect,元素,距离,height,html,rectObject,集合
来源: https://www.cnblogs.com/heibaiqi/p/16527661.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有