元素大小与位置

scroll家族

获取宽高

获取元素的内容总宽高（内容 + padding）返回值不带单位

scrollWidth：可以获取元素的宽度（内容 + padding），不包含滚动条和边框

scrollHeight：可以获取元素的高度（内容 + padding），不包含滚动条和边框

获取位置

获取元素内容往左、往上滚出去看不到的距离

scrollTop：获取垂直方向，被卷去头部距离

scrollLeft：获取水平方向，被卷去头部距离

可以读取，也可以修改（赋值）

// 获取垂直方向页面滚动出屏幕的距离
// html 元素 === document.documentElement
let offset = document.documentElement.scrollTop

offset家族

获取宽高

获取元素的自身宽高，包含元素自身设置的宽高，padding，border

offsetWidth：获取的宽度包含：内容 + padding + border

offsetHeight：获取的高度包含：内容 + padding + border

注：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

获取位置

获取元素距离自己定位父级元素的左、上距离

offsetLeft：当前元素相对于定准父容器的左侧距离

offsetTop：当前元素相对于定准父容器的上侧距离

注：获取出来的数值是只读属性，只能使用，不能设置

如果父容器没有定位，就参照最近的定位父容器，如果所有都没有定位，就参照文档

client家族

获取宽高

获取元素的可见部分宽高（不包含边框，滚动条等）

clientWidth：内容 + pidding , 不包含上边框和滚动条，只能获取可视区域的距离

clientHeight：内容 + pidding , 不包含上边框和滚动条，只能获取可视区域的距离

获取位置

clientLeft：左边框的宽度

clientTop：顶部边框的宽度

是只读属性

resize事件

// 当调整浏览器窗口的大小时，会触发事件
// 检测屏幕的宽度
window.addEventListener('resize',function(){
      let w = document.documentElement.clientWidth
      console.log(w);
})

js方式实现当屏幕宽度到达某个值时实现的某种样式

// 入口函数
window.addEventListener('load', function () {
  window.addEventListener('resize', function () {
    // 原始body背景颜色为红色
    document.body.style.backgroundColor = 'red'
    // 检测屏幕宽度
    let width = document.documentElement.clientWidth
    // 当宽度大于768时，body背景颜色为绿色
    if (width > 768) {
      document.body.style.backgroundColor = 'green'
    }
    // 当宽度大于992时，body背景颜色为蓝色
    if (width > 992) {
      document.body.style.backgroundColor = 'blue'
    }
    // 当宽度大于1200时，body背景颜色为黑色
    if (width > 1200) {
      document.body.style.backgroundColor = 'black'
    }
  })
})