js中getBoundingClientRect的作用及兼容方案

1、getBoundingClientRect的作用

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。

执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性，这些属性以一个对象的方式返回。

2.getBoundingClientRect上下左右属性值解释

主要是left和bottom要解释一下，left是指右边到页面最左边的距离，bottom是指底边到页面顶边的距离。

看图：

3. 浏览器兼容性

ie5以上都能支持，但是又一点点地方需要修正一下，

IE67的left、top会少2px,并且没有width、height属性。

4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法

<div id="test" style="width: 100px; height: 100px; background: #ddd;"></div> <script> function getObjXy(obj){ var xy = obj.getBoundingClientRect(); var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0 bottom = xy.bottom, left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0 right = xy.right, width = xy.width||right - left, //IE67不存在width 使用right - left获得 height = xy.height||bottom - top; return { top:top, right:right, bottom:bottom, left:left, width:width, height:height } } var test = getObjXy(document.getElementById('test')); alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left); </script>

转载于:https://www.cnblogs.com/limeiky/p/6179964.html

js中getBoundingClientRect的作用及兼容方案相关推荐

JS中常遇到的浏览器兼容问题和解决方法
JS中常遇到的浏览器兼容问题和解决方法参考文章: (1)JS中常遇到的浏览器兼容问题和解决方法 (2)https://www.cnblogs.com/wws-bk/p/9770834.html 备忘 ...
IE中的CSS3不完全兼容方案
IE中的CSS3不完全兼容方案 Opacity透明度元素的透明度在IE中可以很方便的用滤镜来实现. view source print? 1 background-color:green; 2 op ...
created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
分享一个自定义的 console 类，让你不再纠结JS中的调试代码的兼容
问题的产生在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...
冒号html5,js中冒号的作用 - binaryTree-fe
说到这个题目,先从今天和朋友讨论一个问题开始.{a:1,b:2}直接在控制台输出时会报错"Uncaught SyntaxError: Unexpected token :":一开始 ...
js里css不起作用,CSS文件在NODE js中不起作用
出于某种原因,我已将我的css文件附加到我的html文件中.然后我在节点js中使用express打开html文件.但是,当我通过节点js运行Web服务器时,css文件无法打开.我认为既然css文件包含 ...
js中return的作用及用法
这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...
ubuntu永中office2012个人版公式字体兼容方案
在ubuntu下安装了最新的永中office2012个人版,发现公式显示于微软office有较大差异,出现了乱码,发信问了永中的客服,是因为缺少相关字体造成.鉴于版权问题,永中没有集成,但是我们自己可 ...
js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助一,js中对象继承 js中有三种继承方式 1.js原型(proto ...

js中getBoundingClientRect的作用及兼容方案

js中getBoundingClientRect的作用及兼容方案

1、getBoundingClientRect的作用

2.getBoundingClientRect上下左右属性值解释

3. 浏览器兼容性

4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法

js中getBoundingClientRect的作用及兼容方案相关推荐

最新文章

热门文章