JS的DOM获取元素尺寸与浏览器窗口

* 获取元素尺寸(元素的占地面积)

    // 0.获取元素
    var oDiv = document.querySelector('div')

• 语法1：offsetXXX
  • 元素.offsetWidth
  • 元素.offsetHeight

    console.log('oDiv.offsetWidth:', oDiv.offsetWidth)
    console.log('oDiv.offsetHeight:', oDiv.offsetHeight)

• 语法2：clientXXX
  • 元素.clientWidth
  • 元素.clientHeight

    console.log('oDiv.clientWidth:', oDiv.clientWidth)
    console.log('oDiv.clientHeight:', oDiv.clientHeight)

• 区别：
  • offsetXXX -> 实际的宽度/高度 + padding + border
  • clientXXX -> 实际的宽度/高度 + padding

* 获取浏览器窗口尺寸

• 1. window.innerXXX - > 计算的时候会包含浏览器的滚动条

    console.log('window.innerWidth:', window.innerWidth)
    console.log('window.innerHeight:', window.innerHeight)

• 2.document.documentElement.clientXXX -> 计算的时候不会计算滚动条(只计算浏览器的可视区域)

    console.log('document.documentElement.clientWidth:', document.documentElement.clientWidth)
    console.log('document.documentElement.clientHeight:', document.documentElement.clientHeight)