• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  getBoundingClientRect() 与正文

getBoundingClientRect() 与 offset

作者:网页模板
类型:文章教程
点击次数:
发布时间:2019-05-31 18:38
分享到:
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

语法
rectObject = object.getBoundingClientRect(); 
返回值: 
    返回 4个方向值 与 2个宽高值
        rectObject.top:元素上边到视窗上边的距离;
        rectObject.right:元素右边到视窗左边的距离;
        rectObject.bottom:元素下边到视窗上边的距离;
        rectObject.left:元素左边到视窗左边的距离;
        rectObject.width:元素的宽度 (内容区+padding+border+滚动条)
        rectObject.height:元素的高度 (内容区+padding+border+滚动条)

在这里需要注意的是: 
    right 方向的值是基于 元素右侧边框到可视区左边的距离 
    bottom方向的值是基于 元素底部到可视区顶部的距离

兼容性 
    方向值可兼容到ie7+; 
    宽高值兼容到ie9+;

对比 
    offset 的方向值需要考虑到父级,如果父级是定位元素,那么子元素的offset值相对于父元素,如果父元素不是定位元素,那么子元素的offset值相对于 可视区窗口。 
    getBoundingClientRect() 的值只相对于可视窗口的距离。
(责任编辑:网页模板)
  • 本文标签:
  • getBoundingClientRec
js循环删除数组中的重复项的问题
js setInterval() 方法