1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script> 8 // 当代码执行到这里的时候，div还没有杯渲染出来，所以这里找不到 9 var box = document.getElementById('box') 10 console.log(box) 11 12 window.onload = function () { 13 // window的load事件，页面加载完成以后才会执行的代码 14 var box = document.getElementById('box') 15 console.log(box) 16 } 17 </script> 18 </head> 19 <body style="height: 10000px; 10000px"> 20 <div id="box">box</div> 21 <script> 22 // 滚动条滚轮事件 23 window.onscroll = function () { 24 // window.scrollTop有兼容性，直接取取不到 25 // 下面这句话就是获取滚动条高度的一个兼容写法 26 var top = document.documentElement.scrollTop || document.body.scrollTop 27 var left = document.documentElement.scrollLeft || document.body.scrollLeft 28 29 console.log(top, left) 30 } 31 32 // 窗口缩放事件 33 window.onresize = function () { 34 // 当窗口大小发生改变的时候触发的事件 35 console.log(window.innerWidth, window.innerHeight) 36 } 37 38 </script> 39 </body> 40 </html>