js中getBoundingClientRect( )方法案例详解
一.getBoundingClientRect() 解析
getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
语法
rectObject = object.getBoundingClientRect();
值
rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边到视窗上边的距离; rectObject.left:元素左边到视窗左边的距离; rectObject.width:是元素自身的宽度 rectObject.height是元素自身的高度
跨浏览器兼容
如果需要更好的跨浏览器兼容性,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
示例
// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
注:DOMRect 是 TextRectangle 或 ClientRect 的标准名称,他们是相同的。
var rect = obj.getBoundingClientRect();
到此这篇关于js中getBoundingClientRect( )方法案例详解的文章就介绍到这了,更多相关js中getBoundingClientRect( )内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
在JavaScript中处理字符串之fontcolor()方法的使用
这篇文章主要介绍了在JavaScript中处理字符串之fontcolor()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06JavaScript中字符串与数组的includes()用法
这篇文章主要介绍了JavaScript中字符串与数组的includes()用法,需要的朋友可以参考下2023-06-06JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
这篇文章主要介绍了JavaScript fontcolor方法入门实例,fontcolor方法用于按照指定的颜色来显示字符串,需要的朋友可以参考下2014-10-10javascript学习(二)javascript常见问题总结
在js使用过程中,经常会碰到一些问题,本人利用闲暇时间整理了一些常见问题的解决方法,贴出来和大家分享,有需要的朋友可以参考下2013-01-01javascript 基础篇3 类,回调函数,内置对象,事件处理
在js中自定义一个类跟java c++就有比较大的区别了,因为这个格式用公式表达起来比较困难,大体说一下吧2012-03-03
最新评论