获取元素到页面顶部的距离_JS获取各种宽高

前提条件
屏幕分辨率 1440 * 900 全屏下浏览器内部高度 1440 * 757
全屏下 浏览器高度 860 （扣除底部工具栏）

html / css

    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    .box {
      width: 300px;
      height: 150px;
      background-color: blue;
      padding: 10px;
    }
    .boxc {
      width: 200px;
      height: 100px;
      margin-top: 10px;
      background-color: red;
      border-top: 3px solid #cccccc;
    }

  <div class="box" id="box">
    <div class="boxc" id="boxc"></div>
  </div>

  let w, w2, w3, w4, w5, w6, w7, w8, w9, w10;
  let h, h2, h3, h4, h5, h6, h7, h8, h9, h10;

innerW/H

• 返回以 像素 为单位的窗口的内部宽-高
• 如果垂直滚动条存在，则这个属性将包括它的宽度
• 高度 不 包括控制台

w = window.innerWidth
h = window.innerHeight
console.log('inner:', w, h)   // 1440 757

outerW/H

• 获取整个浏览器窗口的宽-高
• 包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框
• 高度包括控制台

w2 = window.outerWidth
h2 = window.outerHeight
console.log('outer:', w2, h2) // 1440 860

screen / screen avail

• 屏幕宽-高 / 扣除了window工具栏

w3 = window.screen.width
h3 = window.screen.height
console.log('screen:', w3, h3) // 1440 900

w4 = window.screen.availWidth
h4 = window.screen.availHeight
console.log('screen avail:', w4, h4)  // 1440 860

screenT/L

• 浏览器距离屏幕顶部-左侧的距离
• px

w5 = window.screenTop
h5 = window.screenLeft
console.log('screen T-L:', w5, h5) // 全屏情况下为0 0, 非全屏为真实距离

clientW/H

• 元素自身的宽-高
• 包括padding 但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）

let box = document.getElementById('box')
w6 = box.clientWidth
h6 = box.clientHeight
console.log('client:', w6, h6)  // 320 170

clientT/L

• 一个元素顶部-左侧 边框 的宽度

let boxc = document.getElementById('boxc')
w7 = boxc.clientTop
h7 = boxc.clientLeft
console.log('client T-L:', w7, h7) // 3 0

offsetW/H

• 返回一个元素的布局宽-高
• 包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值

w8 = boxc.offsetWidth
h8 = boxc.offsetHeight
console.log('offset:', w8, h8)  // 200 103

scrollTop

• 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量
• 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0