js 根据浏览器窗口大小变化 resize事件

398 阅读1分钟
<body>
      <div></div>
</body>

<script>
    let div = document.querySelector('div')  //但是因为script在body上方 所以需要在内容加载完成才可

    //resize 只要浏览器窗口发生变化 就响应事件
    //innerWidth 当前浏览器宽度
    window.addEventListener('resize',function () {

        console.log(this.innerWidth)
        //超过800 隐藏div
        if(this.innerWidth > 800){
            div.style.display = 'none'
        }else{
            div.style.display = 'block'
        }
    })
</script>