getBoundingClientRect方法获取元素在页面中的相对位置
获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则
兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单。
1.使用语法:
element.getBoundingClientRect();
方法中没有任何参数,返回值为对象类型。
2.在IE8及以下的浏览器中,返回值对象包含的属性值有:
top::元素上边缘距离文档顶部的距离;
right: 元素右边缘距离文档左边的距离;
bottom:元素下边缘距离文档顶部的距离;
left:元素左边缘距离文档左边的距离;
3.在IE9以上、谷歌、火狐等浏览器中,返回值对象包含的属性值有:
top: 元素上边缘距离文档顶部的距离;
right:元素右边缘距离文档左边的距离;
bottom:元素下边缘距离文档顶部的距离;
left:元素左边缘距离文档左边的距离;
width:元素的宽度(包含 padding 和 border)
height:元素的高度(包含 padding 和 border)
4.在IE8及以下浏览器没有 width 和 height 属性的解决方法:
在IE8及以下浏览器中,可以通过计算得到元素的宽和高:
如:
var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect(); var width = r.right - r.left;
var height = r.bottom - r.top;
getBoundingClientRect方法获取元素在页面中的相对位置的更多相关文章
- 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)
<style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...
- 获取元素在页面中位置 getBoundingClientRect()
DOM 原生方法getBoundingClientRect()获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性--left.top.right和bottom,单位为像素.除了 ...
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- 关于js获取元素在屏幕中的位置的方法
针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
- 我的前端工具集(八)获得html元素在页面中的位置
我的前端工具集(八)获得html元素在页面中的位置 liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...
- jquery获取元素到页面顶部距离
jquery获取元素到页面顶部距离的语句为: $(selector).offset().top
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
随机推荐
- python的命名空间
Python的命名空间是Python程序猿必须了解的内容,对Python命名空间的学习,将使我们在本质上掌握一些Python中的琐碎的规则. 接下来我将分四部分揭示Python命名空间的本质:一.命名 ...
- 以太坊挖矿源码:clique算法
上文我们总结了以太坊最主要的共识算法:ethash算法,本文将重点分析以太坊的另一个共识算法:clique. 关键字:clique,共识算法,puppeth,以太坊地址原理,区块校验,认证结点,POA ...
- GIT入门笔记(17)- 创建分支dev_lsq, 提交到代码
git服务器上默认的已经有主干和test分支. 开发人员提交代码流程如下: 1.用switch to->new branch创建dev1分支 2.push branch提交到dev1分支 3.在 ...
- POJ-1135 Domino Effect---最短路Dijk
题目链接: https://vjudge.net/problem/POJ-1135 题目大意: 有N个关键的多米诺骨牌,这些牌通过一些路径相连接,这些路径是由一排其他骨牌构成的.已知每一条路径上的骨牌 ...
- js的处理技巧
目前来说,处理js有两种方法: 1,通过第三方工具执行js脚本, selenium,会驱动浏览器把js全部加载出来并返回. 2,手动模拟js的执行 2.1)找到js链接,可以在idle中用print( ...
- Menu-右键弹出菜单
#右键弹出菜单 from tkinter import * root=Tk() def callback(): print('我被调用了') menubar =Menu(root) menubar.a ...
- Python无法导入Cython的.pyx文件
在import 相应包之前, 添加: import pyximport pyximport.install() 即可.
- Oracle表空间的管理方式
解释说明:表空间是一个逻辑概念:=> oracle 逻辑概念段区块管理方式: number one => tablespace number two=> segments Oracl ...
- Spring-cloud (一):Eureka注册中心搭建
前提 系统安装jdk1.8及以上,配置好maven的ide(这里用idea进行演示,maven版本3.5,配置阿里云源) 项目搭建 新建一个maven项目,创建最简单的那种就好,项目名这里为Eurek ...
- WebGL之通过外部传入a_PontSize值改变点着色器vshader内置变量gl_PointSize的值
最近分配到一个看起来非常简单的优化需求.通过地图上设置工具来改变地图上显示的点的大小和透明度.无非过程就是从控件面板获取到用户设置的值保存到数据库中.然后地图上画点的时候取出设置的值渲染出点即可.前端 ...