JS获取常用宽高（dom/screen）

1.getBoundingClientRect (MDN)

    // 返回元素的尺寸对象 width/height/top/left/x/y
    let gwh = boxc.getBoundingClientRect()
    console.log('el bounding client rect:', gwh)

2.dom元素宽高

    // offset
    // 返回一个元素的布局宽度。
    // 包含元素的边框(border)、水平线上的内边距(padding)、
    // 竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值
    w8 = boxc.offsetWidth
    h8 = boxc.offsetHeight
    console.log('offset:', w8, h8)

3.dom的Top Left

    // dom相对于容器的top - left
    w9 = boxc.offsetTop
    h9 = boxc.offsetLeft
    console.log('offset T-L:', w9, h9)

4.浏览器可见区域（HTML渲染区域）宽高

    // innerW/H
    // 返回以 像素 为单位的窗口的内部宽-高
    // 如果垂直滚动条存在，则这个属性将包括它的宽度
    // 高度 不 包括控制台 不包括底部工具栏
    w = window.innerWidth
    h = window.innerHeight
    console.log('inner:', w, h)

5.浏览器宽高

    // outerW/H
    // 获取整个浏览器窗口的宽-高
    // 包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框
    // 高度 包括控制台 不包括底部工具栏
    w2 = window.outerWidth
    h2 = window.outerHeight
    console.log('outer:', w2, h2)

6.浏览器相对于屏幕的Top Left

    // screenTop/Left
    // 浏览器距离屏幕顶部-左侧的距离
    // px
    w5 = window.screenTop
    h5 = window.screenLeft
    console.log('screen T-L:', w5, h5)

7.屏幕（显示器）宽高

    // screen
    // 屏幕(显示器)宽-高
    w3 = window.screen.width
    h3 = window.screen.height
    console.log('screen:', w3, h3)
    // screen avail
    // 扣除了window工具栏 实际就是全屏后 浏览器的outerW-H
    w4 = window.screen.availWidth
    h4 = window.screen.availHeight
    console.log('screen avail:', w4, h4)

8.scrollTop

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