js根据当前屏幕窗口大小判断div显示隐藏案例教程

JavaScript根据当前屏幕窗口大小判断div显示隐藏案例代码教程

1.     <style>
   
2.         .zidiu {
   
3.             float: left;
   
4.             width: 300px;
   
5.             height: 300px;
   
6.             margin-right: 20px;
   
7.             background-color: pink;
   
8.             border: 1px solid black;
   
9.         }
   
10.     </style>
    
11.     <div class="zidiu"></div>
    
12.     <div class="zidiu"></div>
    
13.     <div class="zidiu"></div>
    
14.     <div class="zidiu"></div>
    
15.     <div class="zidiu">111</div>
    
16.     <script>
    
17.         var zidiu = document.querySelectorAll('.zidiu');
    
18.         window.addEventListener('resize', function() {
    
19.             if (window.innerWidth <= 1000) {
    
20.                 zidiu[4].style.display = 'none';
    
21.             } else {
    
22.                 zidiu[4].style.display = 'block';
    
23.             }
    
24.         });
    
25.     </script>

复制代码

要触发屏幕大小发生变化才会执行显示与隐藏。