JS窗口大小改变事件|极客笔记

JS窗口大小改变事件

在网页开发中，经常会遇到需要根据用户的窗口大小来改变页面布局或样式的情况。为了实现这一功能，可以利用JavaScript来监听窗口大小改变事件，并在事件触发时进行相应的处理。本文将详细介绍如何使用JavaScript监听窗口大小改变事件，并且给出实际的示例代码和运行结果。

监听窗口大小改变事件

要监听窗口大小的改变事件，可以使用addEventListener方法来为窗口对象（window）绑定resize事件。当用户调整浏览器窗口大小时，resize事件就会被触发，从而可以执行相应的处理函数。

示例代码如下：

window.addEventListener('resize', function() {
    // 在窗口大小改变时执行的代码
    console.log('窗口大小已改变');
});

在上面的示例代码中，我们为窗口对象绑定了一个resize事件，当窗口大小改变时，控制台会输出窗口大小已改变。接下来我们将通过一个具体的示例来演示如何根据窗口大小改变事件来动态改变页面的背景颜色。

示例：根据窗口大小改变背景颜色

下面是一个简单的示例，当用户调整浏览器窗口大小时，页面的背景颜色会随之改变。

<!DOCTYPE html>
<html>
<head>
    <title>窗口大小改变事件示例</title>
    <style>
        body {
            height: 100vh;
            background-color: #f0f0f0;
            transition: background-color 0.5s;
        }
    </style>
</head>
<body>
    <script>
        window.addEventListener('resize', function() {
            if (window.innerWidth < 600) {
                document.body.style.backgroundColor = 'lightblue';
            } else {
                document.body.style.backgroundColor = '#f0f0f0';
            }
        });
    </script>
</body>
</html>

在上面的示例中，我们为窗口对象绑定了一个resize事件，当窗口宽度小于600px时，页面的背景颜色会变为浅蓝色；否则背景颜色为灰色。通过这样的设计，可以根据用户所使用的设备或浏览器窗口大小来动态改变页面的展示效果，提升用户体验。