文档章节

js中getBoundingClientRect()方法详解

不负好时光
 不负好时光
发布于 2018/07/24 16:06
字数 390
阅读 299
收藏 0

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height; 这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0,IE为2

document.documentElement.clientLeft; // 非IE为0,IE为2

functiongGetRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top    :   rect.top - top,

        bottom :   rect.bottom - top,

        left   :   rect.left - left,

        right  :   rect.right - left

    }

}

© 著作权归作者所有

不负好时光
粉丝 22
博文 202
码字总数 103152
作品 0
徐汇
程序员
私信 提问
有关Javascript的面试题

获取页面元素位置与宽高? element.clientWidth = content + padding element.clientHeight = content + padding element.getBoundingClientRect() 返回值情况 left:包围盒左边 border 以外的......

Jack088
2018/12/04
25
0
iOS与JS交互之UIWebView-JSExport协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JSExport」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前端(不...

QiShare
2018/08/31
0
0
Java执行JavaScript脚本破解encodeInp()加密

一:背景 在模拟登录某网站时遇到了用户名和密码被JS进行加密提交的问题,如图: 二:解决方法 conwork.js Methods.java 注意:Js文件在实例中默认保存在项目源文件夹下 更多推荐: Jsoup模拟...

巅峰小学生
2018/02/10
0
0
iOS与JS交互之UIWebView-JavaScriptCore框架

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前...

QiShare
2018/08/30
0
0
[转] 最全前端开发面试问题及答案整理

原文地址:https://github.com/hawx1993/Front-end-Interview-questions 作者:@markYun 前端开发面试知识点大纲: 1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担...

OSC编辑部
2015/07/21
20.7K
4

没有更多内容

加载失败,请刷新页面

加载更多

如何查看ubuntu的版本

cat /etc/issue

南桥北木
35分钟前
3
0
超详细Linux下QT使用appimage打包程序

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/kuer1379/article/details/82885810 一 打包工具 1.linuxd...

shzwork
40分钟前
6
0
Checkstyle的style

checkstyle是什么? 是代码规范检查,关于各种格式的利弊这里就不说了,但是业内有一些总结的规范利于goole或者阿里有自己的代码规范,就需要用到checkstyle。我个人很讨厌这东西,奈何项目再...

stayStand
43分钟前
7
0
左边竖条的实现方法

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div : 1 < div > div> 定义如下通用CSS: 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height ...

前端老手
今天
3
0
java利用ECHARTS.JS在前台显示图表

步骤1: (1)在java后台,使用MSQL分组函数,列出所有线在对应的点的值, (2)组成的Map如图所示: 注意: key为0的value表示X轴需要的数据;key为其他的值表示图表线条的名字,value为x轴的点对应的y...

文文1
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部