JavaScript中的onresize事件|极客笔记

JavaScript中的onresize事件

在Web开发中，我们经常会遇到需要根据浏览器窗口大小的变化来进行相应操作的情况。这时，onresize事件就显得非常重要。在本文中，我们将详细讨论JavaScript中的onresize事件，以及如何利用它来实现一些有趣的功能。

1. onresize事件概述

onresize事件是DOM中的一个事件，当浏览器窗口大小发生变化时触发。我们可以通过给window对象添加onresize事件监听器来处理窗口大小变化的事件。例如：

window.onresize = function() {
    console.log("窗口大小发生变化了！");
};

上面的代码中，我们在浏览器窗口大小发生变化时会在控制台输出”窗口大小发生变化了！”这句话。

2. onresize事件应用

2.1 动态调整元素大小

利用onresize事件，我们可以实现当浏览器窗口大小变化时，动态调整元素的大小。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态调整元素大小</title>
    <style>
        #box {
            width: 50%;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        window.onresize = function() {
            document.getElementById("box").style.width = window.innerWidth/2 + "px";
        };
    </script>
</body>
</html>

在上面的示例中，我们定义了一个id为”box”的div元素，通过onresize事件监听器，当浏览器窗口大小变化时会动态调整”box”的宽度为浏览器窗口宽度的一半。

2.2 响应式布局

另一个常见的应用就是实现响应式布局。通过onresize事件，我们可以根据浏览器窗口大小的变化来动态调整页面元素的布局，以适配不同尺寸的设备和浏览器窗口。

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局</title>
    <style>
        #container {
            display: flex;
            flex-direction: row;
        }

        .item {
            flex: 1;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <script>
        window.onresize = function() {
            var items = document.getElementsByClassName("item");
            if(window.innerWidth < 768) {
                for(var i=0; i<items.length; i++) {
                    items[i].style.width = "100%";
                }
            } else {
                for(var i=0; i<items.length; i++) {
                    items[i].style.width = "30%";
                }
            }
        };

        window.dispatchEvent(new Event("resize")); // 触发一次resize事件，确保初始化时布局正确
    </script>
</body>
</html>

上面的示例中，我们定义了一个具有响应式布局的页面，三个子元素在大屏幕下均分宽度，在小屏幕下铺满整个空间，实现了简单的响应式设计。