js操作盒子模型的13个API（client、offset、scroll三大系列）

js操作盒子模型的13个api

盒子模型：

• 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

js操作盒子模型：
1）操作盒子模型的位置
2）操作盒子模型的大小

---

不管是操作盒子模型的位置，还是盒子模型的大小，一共有13个api:

三类：

1. client系列
2. offset系列
3. scroll系列

1、client系列：

clientWidth（可视区域）: 获取盒子的内容width+左右的padding
clientHeight（可视区域）: 获取盒子的内容height+上下的padding
clientTop:获取盒子的上边框的粗细
clientLeft:获取盒子的左边框的粗细

(1)要获取当前页面内容的宽度（可视区域）：

// 获取一屏的宽度
console.log(document.body.clientWidth)
console.log(document.documentElement.clientWidth)

(2)要获取当前页面内容的高度（可视区域）：

// 获取可视区域的高度
console.log(document.body.clientHeight); // 获取内容（多屏）的 高度
console.log(document.documentElement.clientHeight); // 获取一 屏的高度

(3)client系列的注意点：

1）不能获取，不能设置，它们是只读地
2）得到的是一个数值，没有单位
3）得到的是一个整数，不是小数，及时测试量出来是小数，也会转化成整数
4）不管你的内容是否溢出，得到的是可视区的大小

---

2、offset系列

offsetWidth: box.offsetWidth  在clientWidth的基础上加了border
offsetHeight: box.offsetHeight  在clientHeight的基础上加了border
offsetTop: 获取一个绝对定位元素相对于参考点的上面的距离
offsetLeft: 获取一个绝对定位元素相对于参考点的左面的距离
offsetParent(***): 获取一个定位元素的参考点

3、scroll系列:

scroll本意是滚动的意思 基本上都是在有内容溢出的情况下才会使scroll系列

(1) scrollWidth: 用的不多

在没有内容溢出(水平方向上的溢出)的情况下：scrollWidth == clientWidth
在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollWidth。
只能获取值，不能设置值

(2) scrollHeight: **

在没有内容溢出的情况下：scrollHeight = clientHeight
在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollHeight。
只能获取值，不能设置值
问：我要获取当前页面真实内容的高度。
   答：1）document.body.scrollHeight   2）document.documentElement.scrollHeight
   // 获取当前一屏的高度
   console.log(document.documentElement.clientHeight)
   // 获取当前网页内容高度
   console.log(document.documentElement.scrollHeight)
   console.log(document.body.scrollHeight)

(3) scrollTop:

获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
特殊：不只可以获取，也可以设置（可读可写）  重要
问：我要获取当前页面卷上去高度。
   答：1）document.body.scrollTop   2）document.documentElement.scrollTop
问：一张网页卷上去最大高度是多少？
   答：scrollHeight - clientHeight

(4) scrollLeft:

特殊：不只可以获取，也可以设置（可读可写）
获取水平滚动条滚动的距离（获取水平滚动条卷去的距离）  基本上用不到

总结：

• client系列: width, height, top, left
  clientWidth/clientHeight: 获取盒子或页面可视区域的宽高
  clientTop:获取盒子的上边框的大小
  clientLeft:获取盒子的左边框的大小
• offset系列: width, height, top, left, parent
  offsetWidth/offsetHeight: 获取盒子或页面可视区域的宽高+border
  offsetTop:获取一个定位元素相对于参考点的上面的距离
  offsetLeft:获取一个定位元素相对于参考点的左面的距离
  offsetParent:获取一个定位元素的参考点
• scroll系列: width, height, top, left
  scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
  scrollTop:获取页面或盒子向上卷去的高度
  scrollLeft:获取页面或盒子向左卷去的宽度 基本上用不到

---

应用举例：

获取一张网页可视区的高度：
document.body.clientHeight
获取一张网页真实的高度：
document.body.scrollHeight
获取一张网页卷去的高度：
document.body.scrollTop

---