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;width: 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>
