获取某个html元素相对于视窗的位置集合
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。这就是多出两个像素的原因
获取某个html元素相对于视窗的位置集合的更多相关文章
- 获取某个元素相对于视窗的位置-getBoundingClientRect
1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 语法:这个方法没有参数 rectObject = ...
- getBoundingClientRect获取元素在页面上的位置
getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...
- JQuery 获取页面某一元素在屏幕上的位置
获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 var Y = $('#ElementID').offse ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- JS/jquery获取iframe内部元素和ifame中获取外部元素精华
1.从外部获取iframe内部元素方法: js : window.frames['frame'].document.getElementById("imglist"); //f ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
随机推荐
- Solon 1.7.6 发布,更现代感的应用开发框架
相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
- linux篇-linux命令大全
Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...
- MVC 调试页面路径变成 Views/Controller/Action.cshtml问题
MVC在路由里面已经写好了路径,但是调试时地址栏还是会变成 Views/Controller/Action.cshtml,导致报404错误,找不到路径. 原因可能是你将某一页面设为了起始页,导致每次运 ...
- 行列式&矩阵树定理
行列式: 参考 oi-wiki 定义 对于一个\(n*n\)的矩阵A行列式取值(标量) \(det(A)=|A|=\sum\limits_p(-1)^{\tau(p)}\prod\limits_{i= ...
- 2.26NK周赛
这场打的很烂,说明我对组合数学的掌握(二项式定理,以及递推式的思考方向)都不太好.而且,我做题的思路也很有问题.就是完全凭借灵感,自己没有脑子一样思路就被题目带跑了,根本跳不出来,看到题目也不会分析, ...
- 关于『HTML』:第二弹
关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...
- mybatis if判断等于某个字符串
这种写法是错误的:在OGNL的表达式中,'true'会被解析成字符,因为java是强类型的 <if test="flag=='true' "> AND ho.id = ...
- “摆地摊“都找不到全栈工程师?JNPF帮你分分钟搞定!
大街上捕捉野生程序员 都这样了还找不到全栈工程师 全栈工程师(Full-Stack Engineer)图鉴: 全栈工程师,也叫全端工程师(同时具备前端和后台能力),英文Full Stack deve ...
- docker安装nginx,配置SSL
nginx安装 下载镜像并测试 1.docker pull nginx 2.docker images nginx 查看我们拉取到本地的nginx镜像IMAGE ID 3.首先测试下nginx镜像是否 ...
- Fiddler对安卓高版本进行抓包解决方案以及分析 进阶二
今天是2021年的最后一天了,多分享一些干货吧!看过上一章节教程后会有同学疑惑,我也一步一个脚印的,跟着流程走也设置了代理以及安装了证书,有的同学会发现 为什么手机不能够连接网络了呢?细心一点的同学会 ...