getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

rectObject = object.getBoundingClientRect();
function inputKeydown(e){
　　console.log(e.target.getBoundingClientRect());//bottom:199height:19left:360right:380top:180width:20x:360y:180
}
记录一下备用：
https://www.cnblogs.com/Songyc/p/4458570.html

JS获得元素相对位置坐标getBoundingClientRect()的更多相关文章

  1. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  2. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  3. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

  4. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  5. paip.调试js 查看元素事件以及事件断点

    paip.调试js  查看元素事件以及事件断点 ff 26 +firebug 查看不出来.. 360 ,虽然也是chrome 基础,但是开发工具烂阿,也是显示不出来.. 作者Attilax  艾龙,  ...

  6. html 元素 绝对位置坐标

    $(".seriesListings-itemContainer").click(function(){$(this).css("border","1 ...

  7. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  8. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  9. js设置元素不能编辑

    js设置元素不能编辑 $("#startLocation").attr("readOnly",true); js设置元素可以编辑 $("#startL ...

随机推荐

  1. markdown语法测试集合

    这篇文章包含markdown语法基本的内容, 目的是放在自己的博客园上, 通过开发者控制台快速选中, 从而自定义自己博客园markdown样式.当然本文也可以当markdown语法学习之用. 在mar ...

  2. portainer图形化监控

    步骤1,在Swarm集群中创建一个新的覆盖网络:$ docker network create --driver overlay --attachable portainer_agent_networ ...

  3. Distinct Values(2018hdu多校第一场)

    给你一段长度为n的区间,然后在给你m个小区间,要求这m个小区间里的每个人都不能重复,请你输出字典序最小的方案. 我们可以开一个suf数组,表示我到我后面的不出现重复数字的区间至少需要到达的位置.所以对 ...

  4. Mysql 从入门到遗忘

    高级数据过滤: WHERE AND OR NOT 总是与其他操作符一起使用,用在要过滤的前面. 通配符过滤: LIKE: %相当于正则中的.*?,_相当于正则中的.. $ select id from ...

  5. 以太坊、Hyperledger Fabric和Corda，哪个更好？

    原创: Philipp Sandner 区块链前哨 昨天 编译|盖磊编辑|前哨小兵甲区块链前哨导语: 我们分析了 Hyperledger Fabric,R3 Corda 和以太坊这三种分布式账本技术间 ...

  6. Nginx宣布正式支持gRPC，附示例代码

    原创 2018-03-20 薛命灯 聊聊架构 作者|Owen Garrett编辑|薛命灯 NGINX 官方博客正式宣布 NGINX 支持原生的 gPRC,现在就可以从代码仓库拉取快照版本.该特性将会被 ...

  7. Flask form前后端交互消息闪现

    模拟场景如果当用户注册时输入错误而由于form表单是同步提的交跳转到另一个网页时提示注册失败这时用户还需返回注册页面重新填写大大降低了客户体验,消息闪现能伪装成异步(实际还是同步)就是自己提交给自己然 ...

  8. 使用WinForm Chart控件 制作饼装，柱状，折线图

    http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...

  9. python 二维数组读入

    study from : https://www.cnblogs.com/reaptomorrow-flydream/p/9613847.html python 二维数组键盘输入 1 m = int( ...

  10. 斯坦福大学公开课机器学习：advice for applying machine learning - deciding what to try next（设计机器学习系统时，怎样确定最适合、最正确的方法）

    假如我们在开发一个机器学习系统,想试着改进一个机器学习系统的性能,我们应该如何决定接下来应该选择哪条道路? 为了解释这一问题,以预测房价的学习例子.假如我们已经得到学习参数以后,要将我们的假设函数放到 ...