JS笔记 ( 二十二 ) DOM 的基本操作 补充

---

博主的 Github 地址

---

1. 查看滚动条的滚动距离

• 语法: window.pageXOffset / pageYOffset ( X/Y 轴的滚动条 )
• 备注: 距离是首页像素 + 滚动像素

 

2. 查看滚动条的滚动距离

• 语法: window.innerWidth / innerHeight

 

3. 查看元素的几何尺寸

• 语法: DOMElement.getBoundingClientRect();
• 备注 1:
  该方法返回一个对象, 对象里面有 left, top, right, bottom 等属性,
  left 和 top 代表该元素在左上角的 X 和 Y 坐标,
  right 和 bottom 代表元素右下角的 X 和 Y 坐标.
• 备注 2:
  该方法并不是实时的, 若元素后续发生改变但其调用该方法的返回值并不会改变.

 

4. 查看元素尺寸

• 语法: DOMElement.offsetWidth / offsetHeight
• 备注: 求出来的是元素看起来的尺寸, 不包括外边距

 

5. 查看元素的位置

• 语法: DOMElement.offsetLeft / offsetTop
• 备注:
  对于无定位父级的元素, 返回相对文档的坐标
  对于有定位父级的元素, 返回相对于最近的有定位的父级的坐标

获取最近有定位的父级

• 语法: DOMElement.offsetParent
• 备注:
  返回最近的有定位的父级, 如果无, 返回 body
  body.offsetParent 返回 null

 

6. 让滚动条滚动

• 方法:
  window 上有 3 个方法, 分别是 scroll(), scrollTo() 和 scrollBy() 方法,
  三个方法的功能类似, 用法都是传入 x,y 坐标, 让滚动轮滚动到目标位置.

• 区别: scrollBy() 会在之前的数据基础上做累加

• 示例:
  scroll(0, 500) 与 scrollTo(0, 500)作用一样, 都是滚动到 (0,500) 这个位置
   
  scrollBy(0, 500) 则是在 x 轴滚动 0 个像素, 在 y 轴上滚动 500 个像素的距离.
   
  显然, scrollBy 可以用作连续滚动一定的距离的功能