获取元素尺寸(占地面积) 与 浏览器窗口尺寸

• 1.offset 获取 实际宽度 + padding + border
• 2.client 获取 实际宽度 + padding

//  对应样式和 HTML
//  <style>
//         * {
//             padding: 0;
//             margin: 0;
//         }

//         div {
//             width: 4000px;
//             height: 5000px;
//             background-color: pink;
//             /* padding: 50px; */
//             /* border: 10px solid black; */
//             /* margin: 50px; */
//         }
//     </style>
//       <div></div>




         var oDiv = document.querySelector('div')
        // 获取元素尺寸(占地面积) 

        // 1. offsetXXX         ---> 实际宽度 + padding + border
        // console.log('oDiv.offsetWidth', oDiv.offsetWidth)
        // console.log('oDiv.offsetHeight', oDiv.offsetHeight)

        // console.log('======================')

        // 2. clientXXX         ---> 实际宽度 + padding
        // console.log('oDiv.clientWidth', oDiv.clientWidth)
        // console.log('oDiv.clientHeight', oDiv.clientHeight)

获取浏览器窗口尺寸

• 1. window.inner 计算时 会包含浏览器的滚动条
• 2. document.documentElement.client 计算时 不会计算滚动条(只计算浏览器的可视区域)

        // 获取浏览器窗口尺寸

        // 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.clientWidth', document.documentElement.clientHeight)