Element.getBoundingClientRect()
Element.getBoundingClientRect()方法会返回元素的大小和相对于视口的位置
语法:
var domRect = element.getBoundingClientRect()
值:
返回值是一个 DOMRect 对象。其中 width、height、left 和css 里面是一样的。
width:就是元素自身宽度
height: 元素自身高度
left:元素开始位置到窗口左边的距离
right: 元素的右边到窗口左边的距离
bottom: 元素的下边到窗口上边的距离
top: 元素的上边到窗口上边的距离
x 和 y 相当于 left 和 top
Element.getBoundingClientRect()的更多相关文章
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- getBoundingClientRect在IE9/10里的bug
getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...
- Safari on iOS 7 中Element.getClientRects的Bug
在Safari浏览器中,DOMElement和Range对象都提供了getBoundingClientRect方法和getClientRects方法.顾名思义,getBoundingClientRec ...
- getBoundingClientRect()兼容性处理
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- getBoundingClientRect的用法
getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...
- getBoundingClientRect方法获取元素在页面中的相对位置
获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...
- (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点
Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...
随机推荐
- DW网页制作,数学,数据库管理
数学(函数关系的建立) 函数关系:确定性现象之间的关系常常表现为函数关系,即一种现象的数量确定以后,另一种现象的数量也随之完全确定,表现为一种严格的函数关系. 如:记为y=f(x),其中x称为自变量, ...
- C# 调用者信息获取
做日志组件时,常常会记录调用者信息,通常都是通过反射来获取相应信息.不过.Net 4.5引入了三个新的特性,即CallerFilePathAttribute,CallerLineNumberAttri ...
- [转]谷歌Chrome浏览器开发者工具教程—基础功能篇
来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...
- 使用IDEA创建java项目(hello word)
前提:已安装好jdk,配置好环境变量.我使用的是java 8. 首先在自己的D盘下建一个文件夹,用来存放我们待会新建的项目,我创建了IdeaProject: 1,第一步打开idea 第二步选择创建ja ...
- Vue element-ui:滚动条 分页 禁用选项
1.滚动条设置: <el-scrollbar style="height:100%;">.......</el-scrollbar> 默认会同时出现水平和垂 ...
- linux漏洞分析入门笔记-bypass_PIE
ubuntu 16.04 IDA 7.0 docker 0x00:漏洞分析 1.ASLR的是操作系统的功能选项,作用于executable(ELF)装入内存运行时,因而只能随机化stack.heap. ...
- android Viewpager取消预加载及Fragment方法的学习
1.在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载.通过设置setOffscreenPageLimit(int numbe ...
- wx.grid.Grid
# -*- coding: cp936 -*- import wx import wx.grid import wx.lib.gridmovers as gridmovers import pymss ...
- Unity 多个Android sdk 插件如何组织目录
一般Android 插件放在 Assets/Plugins/Android/ 下, 但是一个项目可能要用到多个sdk , 比如既要用 阿里九游的sdk 又要用 share sdk 怎么办呢, 难道要只 ...
- maven学习(二)maven常用的命令
参考博客:(http://blog.csdn.net/keda8997110/article/details/20925449) 以下命令都是基于命令行的操作,也可以直接在eclipse等IDE上ma ...