DOM中获取元素尺寸和位置常用的API

2021-07-10 14:09

阅读:435

标签:ati   方便   etl   llb   stat   position   宽度   dom   lazy   

client系列

clientTop: 获取元素border-top的宽度
clientLeft:获取元素border-left的宽度
clientWidth: 获取元素的宽度,不包含border
clientHeight:获取元素的高度,不包含border
getBoundingClientRect(): 获取与元素尺寸信息有关的对象, 记住这个API,特别好用!!! 配合window.innerHeight,onscroll可以方便的实现lazy load
+ top bottom: 获取元素上下边(不考虑margin)到浏览器窗口上边的距离数值
+ left right: 获取元素左右边(不考虑margin)到浏览器窗口左边的距离数值
+ width height: 元素的宽度和高度(包含border)
+ x y : 或元素左顶点到窗口左边和上边的距离(不考虑margin) 这个属性兼容性不好,不用

offset系列

offsetParent:获取元素的最近position不是static的祖先元素
offsetLeft: 获取元素(包含border)相对于最近position不是static的祖先元素的左边距离(不包含border,包含padding)
offsetTop: 获取元素(包含border)相对于最近position不是static的祖先元素的上边距离(不包含border,包含padding)
offsetWidth: 获取元素的宽度,包含border
offsetHeight: 后去元素的高度,包含border

scroll系列

scrollLeft: 获取左侧卷入不可见区域的宽度
scrollTop: 获取上侧卷入不可见的区域
scrollWidth: 获取的宽度为(内容实际宽度包括卷入的区域+padding部分)与(元素宽度+padding部分)
scrollHeight: 获取的宽度为(内容实际高度包括卷入的区域+padding部分)与(元素高度+padding部分)
window.scrollBy(x,y): 窗口相对滚动函数
window.scrollTo(x,y): 窗口绝对滚动函数

DOM中获取元素尺寸和位置常用的API

标签:ati   方便   etl   llb   stat   position   宽度   dom   lazy   

原文地址:https://www.cnblogs.com/ykli/p/9681299.html

上一篇:webapi

下一篇:RESTful API 设计指南[转]


评论


亲,登录后才可以留言!