zoukankan      html  css  js  c++  java
  • 调整窗口大小事件

    1,window.onresize 时调整窗口大小加载事件,当触发时就调用的处理<!DOCTYPE html>

       下面,当窗口大小改变时,控制台就会输出窗口的宽度,并打印出 “ 变化了”。 window.innerWidth 当前屏幕的宽度

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <script>
            window.addEventListener('load', function() {
                var div = document.querySelector('div');
                 window.addEventListener('resize', function() {
                    console.log(window.innerWidth);
                    console.log('变化了');
                })
            })
        </script>
        <div></div>
    </body>
    </html>

    2,我们经常利用这个事件完成响应式布局

      比如,当前屏幕宽度小于800时,就让页面中的某个元素隐藏,否则显示。

     <script>
            window.addEventListener('load', function() {
                var div = document.querySelector('div');
                window.addEventListener('resize', function() {
                 
                    if (window.innerWidth <= 800) {
                        div.style.display = 'none';
                    } else {
                        div.style.display = 'block';
                    }
    
                })
            })
        </script>
  • 相关阅读:
    Jmeter后置处理器之Json提取器
    Jmeter体系结构-事务控制器
    一款免费的自动化测试工具:AirtestProject
    jsonpath-rw处理json对象
    MySQL常用SQL
    Git使用
    charles的mock功能
    Django项目之blog表设计(二)
    Django小项目之blog(一)
    selenium无界面浏览器,访问百度搜索为例
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11487009.html
Copyright © 2011-2022 走看看